Before / After Slider

What it does

The before-and-after slider is the show-off piece: two photos of the same thing stacked perfectly, with a handle the reader drags to wipe between them. Renovations, cleanups, redesigns, makeovers, nothing sells the change like controlling the reveal yourself. It's the one block visitors play with twice.

• Starts split down the middle; drag the handle, tap to jump, or nudge with arrow keys.
• On phones, dragging the divider never fights with scrolling the page.
• Little Before and After chips can label the corners, in your own words.
• Both shots must show the same subject under the same conditions; staged comparisons are called out as trust-destroying and possibly illegal.
• With scripts off, visitors still see the finished after photo.

How it works

1. 01

   Pick the divider direction, side to side for the classic wipe, or up and down for tall subjects like buildings.

2. 02

   Decide whether little Before and After labels sit on the corners.

3. 03

   Copy the prompt, the build steps your AI works from, into whichever AI you use.

4. 04

   Add your real photo pair in the marked spot, both shot from the same angle in the same light, after photo underneath.

5. 05

   Give each photo its own short description in the same marked spot, so screen readers know both sides of the story.

6. 06

   Test all three moves: dragging, tapping to jump, and the arrow keys, plus a phone check that the page still scrolls.

What you can customize

• Divider direction: vertical gives the classic left-right wipe; horizontal suits tall shots like portraits, buildings, and full-page screenshots.
• Labels: the Before and After chips keep the sides obvious on any photo; without them the comparison speaks for itself, and screen readers still get told.
• Corner rounding, handle, and sizing adapt to your site automatically, because your AI builds the slider right inside your own design.