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): Showcase Your Work | Use Case(s): Credibility, Grab Attention

Before & After

Horizontal Vertical

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.