---
title: "Side By Side Slide — Free Framer component · Best of Framer"
description: "Free Framer component · by The Ghavas · Carousels. About the component The component is fully customizable through the following properties found on the right panel: Upload before and after…"
canonical: "https://framer.elliotli.dev/component/side-by-side-slide"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Side By Side Slide

# Side By Side Slide

[View on Framer](https://framer.com/marketplace/components/side-by-side-slide/?via=elliot-li)

![Side By Side Slide preview image 1](https://framer.elliotli.dev/og/component/side-by-side-slide/53d38f390bdd7efb/1600x1200.jpg)

## Summary

About the component The component is fully customizable through the following properties found on the right panel: Upload before and after images via the image properties Choose…

## Description

## About the component

The component is fully customizable through the following properties found on the right panel:

-   Upload before and after images via the image properties
    
-   Choose between horizontal or vertical orientation
    
-   Set initial divider position (0-100%)
    
-   Customize divider color, width, and shadow effects
    
-   Toggle and style the circular handle
    
-   Control cursor behavior (resize, pointer, or hidden)
    
-   Enable/disable smooth cursor following mode
    

**Usage** To use the component, simply add it to your Framer project, upload your before/after images, and customize the properties as needed. Users can click anywhere to jump the divider, drag for precise control, or double-click to reset. The smooth animations and responsive design work perfectly across all devices, making it ideal for showcasing transformations, design comparisons, or any before/after scenarios without any coding required.

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

-   All · #2465

## Details

- **Author**: The Ghavas
- **Published**: 2025-10-25
- **Updated**: 2025-12-05
- **Added**: 2025-10-17
- **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