Website elementsMedia & showcase
Before / After
A before after slider, built into your site with no plugin and no library. Two images in one frame. Drag the handle, or use the arrow keys, to reveal one over the other.
You'll need to give us
- The before photoNeeded to startTaken from the same spot and angle as the after photo, so the two line up when a visitor drags between them.
- The after photoNeeded to start
Send these with your request and we can start straight away. Everything else is ours to do.
Show the old and the new in one frame, and let visitors drag to compare.
Also called
TwentyTwentyimage comparison slidercompare sliderUABB Before Afterreveal slider
What it replaces
- UABB "Before After" module (Beaver Builder)
- TwentyTwenty jQuery plugin
- most "image compare" WordPress plugins
Good for
Problem-and-solution illustrations, renovations, retouching, redesigns: anything where the two states share a frame.
Not for
Two unrelated images. If they do not line up, use a two-column layout instead.
Accessibility
Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.
- The control is a native range input: arrow keys move the split, screen readers announce it as a slider with the given label.
- Both images carry real alt text; the before image is not decorative.
- No motion, so nothing to reduce.
Where it's live
- contexture.ai: Home, “The Contexture Difference” section
How to ask for it
“The before-after on our home page, with …”
Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.
More elements you can ask for: Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Radio group, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.
More in Media & showcase
See them all working- Instagram feed
Your latest posts on your own site, from our copy of the images, so the grid does not go blank when Instagram changes its mind.
- Card slider
Show more reviews, team members or posts than fit across the page, and let visitors swipe or click through them.
- Video player
Your video, your thumbnail, and nothing loads from YouTube until someone presses play.
- Testimonial carousel
Let what your clients say move gently across the page, without anyone losing a quote halfway through reading it.
Want the before / after on your site?
Tell us about the business. We build the site with it, launch it, and change it whenever you ask.