Before & After

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.


Site Goal(s): | Use Case(s): ,

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).

WINTER SUMMER

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.

BEFORE AFTER
BEFORE AFTER