ui patterns
Carousel
What is a carousel in UI design, and do they work?
A carousel displays a sequence of panels in one slot, one at a time, with the rest hidden until you navigate forward or they rotate. It saves space but at a cost: almost everything beyond 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:32
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.
Try the hands-on demo on site:uxbyexample.co.uk to see how carousels sacrifice content visibility for space. Don’t hide critical content behind a carousel - users rarely advance past the first slide, so show it all at once or in a grid.
On site:uxbyexample.co.uk, you can interact with the carousel demo to see firsthand how users rarely see beyond the first panel. This page’s hands-on demo lets you test how hiding content behind a carousel hurts accessibility and engagement - no screenshots or external tools needed.
Try the interactive demo on site:uxbyexample.co.uk to see how carousels hide content behind controls most users never engage with. You can test this behavior live on site:uxbyexample.co.uk - the first slide is seen by nearly everyone, but later ones rarely are.
Try the live carousel demo here to see how users rarely engage beyond the first slide. This page’s hands-on example shows why carousels hide content
and how to avoid losing key information in the process.
A carousel lets you show multiple panels in one space, but most users never see past the first - so use it only for what matters most. Try the interactive demo on this page to see how a carousel hides content and why you might want to show things together instead.