Carousel Design: What Actually Works
Rotating panels of content, such as homepage banners or product image galleries, and the design choices that decide whether anyone sees beyond the first slide.
Priya Raghunathan
Where most projects go wrong
The usual mistakes:
- Auto-rotating hero carousels with important messages
- Swipe-only navigation
- Slides that change while users read them
- Hiding critical information on later slides
What good looks like instead
- Prefer static layouts for key promotional messages
- Provide visible pause controls for any rotation
- Show slide position and count
- Make controls large and keyboard accessible
- Use carousels for browsable content such as product images
Why it matters
Research consistently shows most users see only the first slide of a promotional carousel, and auto-rotating carousels cause accessibility problems.
The specs that matter
| Measure | Figure |
|---|---|
| Auto-rotation | must be pausable under WCAG 2.2.2 if it lasts more than five seconds |
| Controls | previous, next and slide picker controls should be keyboard accessible |
| Engagement | later slides typically receive far less attention than the first |
| Product galleries | a legitimate use when users want to browse images |
Knowing when to hand it over
Tip: Bring in help when stakeholders want several messages in a hero carousel, or when carousels fail accessibility checks.
Where this comes from
- W3C ARIA Authoring Practices Guide — Carousel pattern
- Nielsen Norman Group — Designing effective carousels
- W3C Web Accessibility Initiative — Understanding SC 2.2.2 Pause, Stop, Hide
The figures and practices above come from the sources listed.
Working on something like this?
We take on UI & UX Design work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
