Before / After Slider
A draggable comparison of two images: same subject, real photos, and a divider the reader controls.
Copied 0 times.
Members only
This design needs a membership.
Today's price: $1/month, locked forever once you join.
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
- 1Pick the divider direction, side to side for the classic wipe, or up and down for tall subjects like buildings.
- 2Decide whether little Before and After labels sit on the corners.
- 3Copy the prompt, the build steps your AI works from, into whichever AI you use.
- 4Add your real photo pair in the marked spot, both shot from the same angle in the same light, after photo underneath.
- 5Give each photo its own short description in the same marked spot, so screen readers know both sides of the story.
- 6Test 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.
You'll also like
Try it: tap the offer box, the total updates.
Order Bump Box
A checkbox offer above the pay button that adds one extra item to the order. Price straight from config.
Try it: click Spin. The prize is drawn by weight before the wheel moves.
Spin the Wheel
A prize wheel with real odds you define. The animation lands on the prize that was actually drawn, every time.
One email a week. Unsubscribe anytime.
Newsletter Section
A full-width inline email capture section that earns the signup with a clear promise, not a popup.