Before and after sliders let visitors drag a handle to compare two images. They are perfect for renovations, cleaning, beauty, photo editing and design work. Many plugins exist; here is what makes a good one.
1. Easy creation in the block editor
A block with two image pickers and a live preview is much faster than configuring sliders in a separate screen.
2. Orientation and interaction
Horizontal (left / right) and vertical (top / bottom) comparisons, with drag, tap or “follow the mouse” modes.
3. Touch and mobile
The handle must be easy to drag on a phone without scrolling the page accidentally.
4. Accessibility
Keyboard control (arrow keys, Home / End) and screen-reader support make the slider usable by everyone.
5. Labels
“Before” and “After” labels, always visible or on hover, that do not hide the image when the handle passes over them.
6. Image ratio and responsive images
Fixed ratios (16:9, 4:3, 1:1…) keep galleries consistent, and responsive images with lazy loading keep pages fast.
7. Weight
A comparison slider needs very little code. Some plugins load jQuery and large libraries for it; a good one needs only a few kilobytes.
Checklist
- Gutenberg block with live preview
- Horizontal and vertical
- Drag, tap, hover modes
- Keyboard accessible
- Smart labels
- Ratios, srcset, lazy loading
- A few KB of JavaScript
Who needs a before / after slider
Renovation companies, cleaners, landscapers, painters, hairdressers, makeup artists, photographers, retouchers and web designers: anyone whose work produces a visible transformation. It is also useful for product comparisons and restoration work. See websites for tradesmen and salon websites.
Test before you decide
- Create a slider with two real photos of different sizes.
- Drag the handle on a phone while scrolling the page.
- Use only the keyboard to move the handle.
- Insert several sliders on one page and check the loading time.
- Check the labels do not hide important parts of the image.
Our option
Revealr checks every box with about 3 KB of JavaScript and no jQuery. Drag the handle on the before / after demo, and read tips for great before and after photos.
Frequently asked questions
Can I use a before/after slider in Elementor?
Yes, with a shortcode.
What photos work best?
Same angle, framing and light for both images.
Does it work on phones?
A good slider supports touch dragging without interfering with page scrolling.