---
title: "Picture Slider Pro — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Martin L · Interactive. Smooth before & after comparison"
canonical: "https://framer.elliotli.dev/component/picture-slider-pro"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Picture Slider Pro

# Picture Slider Pro

Smooth before & after comparison

[View on Framer](https://framer.com/marketplace/components/picture-slider-pro/?via=elliot-li)

![Picture Slider Pro preview image 1](https://framer.elliotli.dev/og/component/picture-slider-pro/6f90ca502adbea1c/1600x1200.jpg)

## Summary

Smooth before & after comparison

## Description

Turn two static images into an interactive comparison with Before After Slider — a responsive Framer component for renovations, real estate, photography, beauty, fitness transformations, product improvements, redesigns, restorations, and creative portfolios.

Visitors can reveal the difference by dragging the handle, moving their pointer, clicking the image, or using the keyboard. Touch devices automatically use intuitive drag controls.

KEY FEATURES

• Horizontal and vertical comparison modes

• Drag and hover interactions • Responsive on desktop, tablet, and mobile

• Fill Frame and Aspect Ratio sizing

• Cover and Contain image fit

• Independent focal points for both images

• Adjustable starting position

• Click-to-move and double-click reset

• Instant Before/After image swapping

• Custom Before and After labels

• Solid, Glass, and Outline label styles

• Custom fonts, colors, padding, and borders

• Adjustable divider, handle, shadows, and corner radius

• Optional drag hint and reset button

• Auto Preview with custom delay, duration, range, and looping

• Keyboard navigation with adjustable steps

• Custom alt text and accessible component name

• Customizable focus styling

• Lazy and Eager image loading • Reduced-motion support

Auto Preview animates the comparison on the live page and pauses during hover, keyboard focus, offscreen viewing, or hidden browser tabs. Manual interaction immediately returns control to the visitor.

Everything is managed through native Framer property controls — no coding, external packages, or additional services required. Use the polished default design or customize every important visual detail to match your brand.

Perfect for portfolio sections, landing pages, service websites, case studies, and comparison cards. Add your images, choose an orientation, customize the design, and publish.

Show results instead of describing them. Before After Slider turns visual transformations into memorable, interactive stories.

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

-   All · #9935

## Details

- **Author**: Martin L
- **Price**: $5.00
- **Published**: 2026-09-16
- **Updated**: 2026-09-16
- **Added**: 2026-09-16
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase