ui patterns
Carousel
What is a carousel in UI design, and do they work?
A carousel shows a series of panels in a single slot, one at a time, with the rest hidden until you advance or they rotate in. It promises to fit a lot into a little space - but the catch is that almost everything past the first panel goes unseen, because most people never advance and auto-rotation moves on before they engage.
Also known as: carousel UI, image slider, content slider, rotating banner
Prefer to watch?
Watch the recap 0:44
The demo
A promo carousel. Click through the panels - then watch the "who sees this" indicator, and notice where the one panel that actually matters is hiding.
What this demo shows (text version)
A carousel cycles through five promotional panels in one slot: "Free delivery", "New arrivals", "Sale - up to half off", "Join our newsletter" and "Refer a friend". You move between them with the previous/next buttons or the position dots.
Alongside, a "who sees this" indicator shrinks as you advance: the first panel is seen by virtually everyone, but each later panel is reached by far fewer people, because most never click past the first and auto-rotation carries on before they engage. The useful panel - the "Sale" - sits at position three, where hardly anyone in the wild would ever see it. The lesson: don't hide important content past the first panel; if several things matter, show them together instead of behind a control most people never use.
A carousel trades visibility for space: the first panel is seen by nearly everyone, and each one after it by far fewer. So never put anything you actually need people to see past slide one. If several things all matter, show them together - stacked or in a grid - rather than hiding them behind a control most people never touch.
You only reached the later panels because you chose to click through. In the wild hardly anyone does - so the "Sale" you found on panel three was, in effect, invisible. The carousel didn't save space; it hid most of its own content.
Carousels fail on attention, not aesthetics. The first panel reads as the answer, so people act on it or move on; later panels are out of sight, and out-of-sight is out of mind (plain change blindness when they auto-rotate). The space you "saved" was paid for by burying the very content you put there.
If everything in the carousel matters, that's the tell it shouldn't be a carousel. Show the panels together - a stack on mobile, a grid on wider screens - so each is seen on its own merits. A carousel is for content that is genuinely optional and roughly equal in value, like a gallery you browse for pleasure.
If you must use one, make it controllable and honest: no auto-rotation (or pause on hover and focus), clear prev/next and position dots, keyboard support, and respect for reduced-motion. And put the one thing that truly matters on the first panel - or, better, outside the carousel entirely.