Skip to content
UX Atlas
Plate CMP·027 · ComponentGrid E2 · Rev. 2026-08-14

Carousel

Rotating content in one space, which performs poorly for anything the user needs to see.

ComponentMixed evidenceIntermediate

Definition

A carousel cycles through content items in a fixed region. Auto-advancing carousels have consistently poor engagement beyond the first slide and introduce several accessibility problems.

Mixed evidence. Real research exists, but findings conflict, effect sizes are small, or the jump from the lab to interface design is contested.

On this plate
  1. 1Definition
  2. 2If you must build one
  3. 3If one is unavoidable
  4. 4In practice
  5. 5Local chart
  6. 6Sources
  7. 7Continue from here

Reach for this when

  • Browsing homogeneous items such as product images, where the user drives the movement.

Common mistakes

  • Auto-advancing content.
  • Important content on slides after the first.
  • No keyboard access.

If you must build one

  • Do not auto-advance. If you do, provide a visible pause control and stop on hover and focus.
  • Show that more content exists by letting the next item peek in from the edge.
  • Provide visible previous and next controls with accessible names, plus keyboard support.
  • Make each item reachable by keyboard and expose position, such as 'item 3 of 8'.
  • Prefer a horizontally scrollable list with scroll-snap over a slide-swapping carousel. It is simpler, works with native scrolling, and is accessible by default.

If one is unavoidable

Do

  • Remove auto-rotation, or provide a visible pause that persists.
  • Show that there is more, with a peeking next item rather than dots alone.
  • Make it operable by keyboard, with each slide reachable and announced.
  • Track engagement per slide, which usually ends the argument about whether to keep it.

Do not

  • Auto-advance faster than a paragraph can be read.
  • Put the primary message on slide three.
  • Use dots as the only affordance. They are small, unlabelled and rarely understood as navigation.
  • Move the content under the reader's pointer while they are reaching for it.

In practice

  1. i.

    Slide one, and nothing else

    Where the clicks go

    Published analyses of homepage carousels repeatedly find the overwhelming majority of interaction on the first slide. The rest of the content is not competing for attention, it is absent.

  2. ii.

    Rotation against reading

    Auto-advance

    A carousel that advances every five seconds interrupts anyone reading the slide, and readers who use magnification or switch devices lose their place entirely. Auto-rotation is the property that causes most of the harm.

Local chart

CMP·027 · Region III · Grid E2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Banner BlindnessPSY·003 · WHY THIS WORKSSelective AttentionPSY·004 · PRINCIPLES BEHIND THISClosureFND·007 · PRINCIPLES BEHIND THISImageryFND·051 · PRINCIPLES BEHIND THISMotionFND·052 · PRINCIPLES BEHIND THISReduced MotionA11Y·012 · DEPENDS ONInfinite Scroll and PaginationPAT·021 · OFTEN USED WITH

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

An Ecommerce Experience

Why this works

The reasoning this entry rests on.

  • Banner BlindnessPSY·003 · Psychology

    Rotating promotional content is the canonical case of a region people learn to ignore.

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.