Before & After Slider

Before & After Slider

Added: January 2, 2020

Description

Use this module to display two outcomes of one image and allow users to see both by dragging an interactive slider between the two views.

Requirements:

We will need the before and after images. Typically these work best when they are the same height and size. 

Performance:
May cause some slowness, but within reasonable limits.

Horizontal

Below example showing the horizontal orientation of the slider with a circular handle.
Drag the slider sideways to see the before and after (better on mobile).

Vertical

Below example showing the vertical orientation of the slider with a square handle.
Drag the slider up and down to see the before and after.

About:

Site Goal(s): Showcase Your Work

Supported Plan(s):


Functionality:


Availability:


Related Features: