Before / After Slider

Last updated: January 11, 2026

Replo supports creating a component where users can drag between two different components.

Before / After Slider Contents

There are three parts of the Before / After slider:

  1. The "Before" content

  2. The "After" content

  3. The "Slider control"

The "Slider control" is the component that users are able to drag to swipe between before and after. The before content, after content, and slider control are just Containers, so they can contain most types of Replo components - images, other containers, complex layouts, products, etc.

Adding a Before / After Slider

  1. Select "Components" from the left side of the editor

  2. Search "Before / After"

  3. Drag the "Before / After Slider" card into the page

Advanced Configuration

By selecting "Config" for the Before / After slider, you can control several details. For example:

  1. You can change the slider from horizontal to vertical orientation

  2. You can set the initial slide position

  3. You can configure the slider to automatically slide when the user hovers over it, so that they don't have to press down their mouse