---
title: "Before/After Image S — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Joeerito · Carousels. Before and after image slider"
canonical: "https://framer.elliotli.dev/component/before-after-image-s"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Before/After Image S

# Before/After Image S

Before and after image slider

[View on Framer](https://framer.com/marketplace/components/before-after-image-s/?via=elliot-li)

![Before/After Image S preview image 1](https://framer.elliotli.dev/og/component/before-after-image-s/e9d13dc7efb756df/1600x994.jpg)

## Summary

Before and after image slider

## Description

A responsive drag-to-compare slider for showing before/after transformations —

home renovations, design revamps, photo edits, fitness progress, case studies.

Drag with mouse, touch, or keyboard. Every visual detail is editable from the

property panel, no code required.

FEATURES

\- Horizontal or vertical orientation — frame shape adapts automatically

\- Cover or Contain image fit, so your images never look cropped or stretched

\- Fully accessible — keyboard arrow key support, proper ARIA roles

\- Customizable handle: size, color, icon, shadow, hover scale

\- Before/After labels with position, color, and style controls

\- Adjustable divider width, color, and glow-on-drag effect

\- Subtle load-in nudge animation so visitors notice it's draggable

\- Optional edge vignette for a polished, framed look

\- Works as a manual drag slider, or set a fixed reveal position for

scroll-triggered or programmatic control

USE CASES

Renovation and redesign portfolios, photo editing showcases, product

transformations, fitness/progress galleries, agency case studies,

before/after marketing sections.

No code needed — every option is a control in the Framer panel.

## Rank history [How rankings work →](/terms#rankings)

-   All · #10176

## Details

- **Author**: Joeerito
- **Price**: $5.00
- **Published**: 2026-09-01
- **Updated**: 2026-09-01
- **Added**: 2026-09-01
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view