02UI
Join the Lab

Carousel

A carousel shows a few related panels in a row and moves between them one at a time. It saves horizontal space when everything cannot fit on screen together.

Structure and navigationBuild difficulty: Hard<div role="region">

Also called Slider, Slide deck, Image carousel.

Overview

Revenue, active customers and open invoices in one glance.

Invoices

Four invoices are waiting to be sent this week.

Customers

Northwind Studio renewed for another year.

Use the arrows or arrow keys when the carousel is focused. Dots below jump to a slide. One panel is visible at a time.

For designers

A carousel trades simultaneous visibility for focus. One slide gets the full width, which suits photo galleries, onboarding tips and dashboard summaries that would crowd a single row of cards on a phone.

The cost is discoverability. Anything off the first slide is invisible until someone swipes or clicks. If the second slide holds the primary action, most people will miss it. Carousels work when every slide is optional or the first slide carries the main message.

Nielsen Norman Group's research on homepage rotors showed that only the first slide gets meaningful clicks. That does not ban carousels, but it sets expectations. Put the headline offer on slide one. Use later slides for secondary stories people can browse if they want.

When to use a carousel

Use a carousel when

  • Several peers share one band of space, like hero banners or product shots
  • Only one item should be prominent at a time on a narrow screen
  • The set is small, roughly 3 to 7 items, and loops or paginates clearly

Reach for something else when

Variants

Invoices

Four invoices are waiting to be sent.

One slide visible with prev and next on the sides. Dots optional but help when slides look similar.

With arrows. Prev and next on the sides. Required for desktop when swipe is not available.

With dots. Dots below for jump navigation when slides are hard to distinguish.

Peek. Next card visible at the edge to hint that more content exists.

How to build a carousel

Wrap slides in a region with aria-roledescription="carousel". Each slide is a group with aria-roledescription="slide".

<div role="region" aria-roledescription="carousel" aria-label="Highlights">
  <div aria-live="polite">
    <div role="group" aria-roledescription="slide" aria-label="Overview">
      <p>Revenue summary</p>
    </div>
  </div>
  <button type="button">Previous slide</button>
  <button type="button">Next slide</button>
</div>

Arrow keys inside the region move between slides. Disable prev on the first slide and next on the last unless you implement looping. Focus should stay on the control that moved the slide, not jump into slide content unexpectedly.

If slides autoplay, provide pause and honour prefers-reduced-motion by stopping animation. A carousel that moves while someone reads the slide is a WCAG 2.2.2 failure.

Product image galleries on commerce sites are a fair use. Three to five shots of the same product, swipe on phone, arrows on desktop, dots optional. Marketing heroes with seven unrelated promos in one rotor are where the pattern earns its bad reputation.

Caption text on each slide should live inside the slide region so screen readers read title and body together when focus moves into the carousel.

Edge cases

Mixed slide heights. Set a min-height on the viewport or let the tallest slide set the height so dots and arrows do not jump.

Touch and mouse. Support swipe on trackpads and phones plus visible buttons on desktop. Never rely on swipe alone.

Reduced motion. Slide transitions ease by default. Under prefers-reduced-motion: reduce, swap slides without horizontal motion.

Video slides. If a slide contains video, pause playback when the slide leaves view. Audio bleeding from an off-screen slide is both annoying and a failure of WCAG 1.4.2 Audio Control when sound plays longer than three seconds.

Common questions

Carousel or tabs?
Tabs label every option in a strip people can jump to directly. A carousel hides off-screen items and asks for a swipe or arrow to reach them. If every option must be visible without interaction, tabs win. If the set is visual and space is tight, a carousel can work.
Should carousels autoplay?
Rarely in product UI. Autoplay on marketing heroes is common, but it needs a pause control and respect for prefers-reduced-motion. In apps where people read content, autoplay steals focus and fails WCAG 2.2.2 Pause, Stop, Hide for moving content that lasts more than five seconds.
Do carousels need dots?
Dots help when slides look alike and people need to know how many exist. They should be buttons that jump to a slide, not passive indicators. Label them with the slide title in aria-label, not Dot 1.
How does keyboard focus work?
The carousel region is one tab stop. Left and Right arrows move between slides when focus is inside, matching the pattern in the demo. Prev and next buttons need visible labels for screen readers even when they show only chevrons.
One slide or peek the next?
Peeking the next card signals that more content exists. It works for card carousels on mobile. Full-width single slides work for heroes where each slide is a complete message.
What about infinite loop?
Looping from the last slide back to the first is fine for galleries. For step-like content, stop at the ends so people know they reached the boundary.

Last reviewed 26 AUG 2026