Two completely different widgets answer to the name “image slider,” and picking the wrong one is a reliably common way to waste an afternoon. One is the carousel: a box that rotates through separate photos, usually with dots underneath and arrows on the sides. The other is the before and after slider: one frame holding two versions of the same image, with a handle you drag to reveal the change. They solve different problems, they fail in different ways, and search results mix them together relentlessly.
The sixty-second version: if your images are different things, you want a carousel. If your images are two states of the same thing, you want a before and after. Everything below is detail on top of that rule.
What a carousel is actually for
A carousel is a space-saving device. Five product photos, one hero slot; the carousel time-shares the pixels. It earns its place when the images are peers, a gallery of separate rooms, a row of testimonials, product shots from different angles, and the reader is browsing rather than judging.
It comes with known baggage. Auto-advancing carousels test badly over and over: the much-cited Notre Dame homepage data from 2013 found that about 1% of visitors clicked the carousel at all, and 84% of those clicked only the first slide. Old numbers, and nothing published since has seriously contradicted them. There’s even a single-purpose website, shouldiuseacarousel.com, that has been answering “probably not” for over a decade. That doesn’t make carousels useless. It means slide two is where content goes to be ignored, so don’t put anything load-bearing there.
If a carousel is what your page needs, use an established library instead of hand-rolling: Swiper and Splide are the current standards, Slick the older jQuery one, and most site builders ship one built in. Turn off auto-advance or slow it way down, keep it to a handful of slides, and make the arrows big enough to hit on a phone.
What a before and after slider is for
A before and after slider is a comparison device. It exists for exactly one situation: you changed something and want the viewer to see the change. A photo edit, a renovation, a redesign, a game mod, an AI upscale, a teeth whitening. Two states, same subject, same framing.
The reason it beats a carousel for this job is mechanical. In a carousel, the before and the after occupy the slot at different moments, so the viewer compares against memory, and memory is terrible at subtle differences. Under a slider, both versions occupy the same pixels at the same time, and dragging the boundary across a detail makes the difference pop without any remembering. Try it:
A carousel of before/after pairs is the most common wrong choice out there. The photos are all there, technically. The comparison never happens in the viewer’s head.
The decision, case by case
- Product photos from several angles: carousel. Different views, not two states.
- Portfolio of client work, unrelated projects: carousel, or better, a plain grid.
- Renovation, landscaping, detailing, dental work: before and after slider, one per project.
- Photo retouching or restoration: slider, no contest, the differences are subtle by nature.
- Same product in six colors: carousel. Colors are peers, not versions.
- Website redesign reveal: slider, old versus new at the same scroll position.
- A hero banner rotating promotions: carousel, but read the study note above and consider just picking your best promotion.
- Game mod or graphics comparison: slider, and there are dedicated capture guides for getting the two frames identical.
Mixed case worth naming: a page full of transformations, say a detailer with twelve cars. Don’t stack twelve sliders and don’t bury the pairs in one carousel. Embed two or three of the best as sliders and link the rest as an album, which keeps the page fast and the wow intact.
Effort and upkeep, compared
A carousel is a JavaScript component on your page. You’ll pick a library, load its CSS and JS, feed it markup, and revisit it when your theme updates or the library majors. That’s fine, it’s normal web work, but it is work, and it’s yours forever.
A before and after slider doesn’t have to be. You can make the comparison at imgi.co in your browser, free and without an account, and paste a one-line iframe into any platform that takes an embed; the embed guide walks through WordPress, Squarespace, Ghost, Webflow, and the plan gotchas per platform. Nothing to maintain, and the same comparison doubles as a shareable link and a GIF export for the places that strip embeds. If you’re a developer who wants the slider native in your own product, libraries like img-comparison-slider exist for that, and the tools roundup compares the build-vs-embed routes.
One more difference nobody mentions: intent
A visitor flicks through a carousel. A visitor plays with a before and after slider. Watch anyone meet one: they drag it back and forth three, four times, hunting the differences themselves. For a page whose whole argument is “look what we changed,” that interaction is the conversion working. Pick the widget that matches what you’re actually asking the visitor to do: browse, or compare.
If it’s compare, the slider takes ten seconds to try.