---
title: "Before After Sliderr — Free Framer component · Best of Framer"
description: "Free Framer component · by Khizer · Carousels. Free Before After Slider"
canonical: "https://framer.elliotli.dev/component/before-after-sliderr"
---

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

# Before After Sliderr

Free Before After Slider

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

![Before After Sliderr preview image 1](https://framer.elliotli.dev/og/component/before-after-sliderr/7a2b7812a3d089ce/1600x1201.jpg)

## Summary

Free Before After Slider

## Description

## **Before/After Image Slider**

Show transformations, don't just tell them. A smooth, draggable before-and-after comparison slider built for Framer - perfect for renovations, design case studies, photo edits, fitness transformations, or product upgrades.

**Features**

-   **Horizontal or vertical drag** - pick the orientation that fits your layout, switchable with one click
    
-   **Full-bleed image compare** - drop in any two images and let visitors scrub between them with mouse or touch
    
-   **Custom labels** - add "Before/After" text (or anything else) with independent color controls for each pill, so they match your brand
    
-   **Typography control** - set font, weight, size, and line height right from the Framer panel, no code
    
-   **Auto-fading labels** - labels gracefully fade out as the handle approaches their edge, keeping the UI clean
    
-   **Buttery-smooth interaction** - direct DOM updates during drag mean zero flicker and zero lag, even on large images
    
-   **Touch-optimized** - built-in scroll-locking while dragging, so it works cleanly on mobile
    

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

-   All · #3217

## Details

- **Author**: Khizer
- **Published**: 2026-07-12
- **Updated**: 2026-07-12
- **Added**: 2026-07-12
- **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