The Carousel
also known as: The Slider, The Rotator, The Hero Banner, The Content Cycle
"In seventeen years of field research I have not once observed a user spontaneously interact with carousel content beyond the first slide. I have observed users attempt to read the first slide as it was replaced by the second. I have observed users reach for a pause control that was not present. I have observed users abandon the dungeon entirely. I have not observed a user think: 'I am glad this content was rotating.'"
— Field journal of Dr. Emeline Voss, Principal Researcher, Heuristic Order Usability Division, year 9 of 17
The Carousel exists because two things are true simultaneously: space on the dungeon's surface is finite, and stakeholders frequently require that multiple messages occupy the same surface at once. The Carousel's ecological function is to reconcile these competing pressures by cycling through content over time, presenting one item at a time from a predetermined sequence. In this narrow sense it is technically adequate. The difficulty is that users do not experience time in the way the Carousel assumes they do. They arrive, they glance, they move on. The second slide is seen by fewer users than the first. The third by fewer still. By the fifth, the Heuristic Order's data suggests, engagement is statistically negligible.
The autoplay Carousel — one that advances without user instruction — is the creature's most contested form. It moves content before the user has finished reading it. It is actively disorienting for users with vestibular disorders, for whom unexpected motion produces nausea or dizziness. It is hostile to users with cognitive differences who need more time to process text. It directly violates WCAG 2.1 Success Criterion 2.2.2, which requires that moving content that starts automatically and lasts more than five seconds can be paused, stopped, or hidden. The Heuristic Order's position is that if the content is important enough to display, it is important enough to remain still long enough to be read.
Fig. XI — The Carousel: a long segmented creature like a centipede, each body segment a panel, the visible panel slightly raised with a rotating gear, arrow pincers on left and right, navigation dots along the underside.
None of this has prevented the Carousel from becoming one of the most frequently summoned creatures in the Codebase. The reason is architectural: it is summoned by committee. Marketing requires the promotional banner. Product requires the feature highlights. Leadership requires the brand statement. The Carousel is the organism that results when no one can agree what the most important thing is, and everyone's answer must be accommodated. In this light it is less a design decision than a political outcome. The Order notes this without judgment and recommends that the conversation about content priority happen before the Carousel is summoned, not after.
swords Vital Statistics
auto_awesome Special Abilities
prefers-reduced-motion: reduce by disabling autoplay entirely. A pause/play toggle must be persistently visible and keyboard-accessible.
aria-live="polite") so that screen reader users are informed of content changes without disruptive interruption.
aria-current="true" or similar). An indicator array that is purely decorative has failed its only function.
prefers-reduced-motion media query exists precisely because motion-based components like the Carousel can cause physical harm to some users. A Carousel that ignores this query has prioritised aesthetic continuity over user safety. The Order considers this a critical failure and documents it as such.
shield Weaknesses
prefers-reduced-motion— disables autoplay and transitions when the user has requested reduced motion; the single most important mitigation for the creature's harmful autoplay behaviour- Pause control — a visible, keyboard-accessible button that halts autoplay; its presence converts the Carousel from hostile to merely questionable
- ARIA live region on slide content — announces content changes to screen reader users;
aria-live="polite"is the correct value;aria-live="assertive"will interrupt whatever the user is doing and is almost never appropriate - Properly labelled indicator buttons — "Go to slide 2 of 5" is sufficient; an unlabelled dot is not a button
- Conversion data — the most reliable counter to the Carousel in a stakeholder meeting is evidence; click-through rates by slide position are typically sufficient to end the debate
- Content hierarchy — if one piece of content is important enough to display, it is important enough to display without hiding it behind rotation; the existence of the Carousel often signals that a content priority decision has been deferred rather than made
category Known Variants
- The Hero Banner — a Carousel with one slide, retained because someone once removed the other slides but left the carousel mechanism in place. Technically not a Carousel. Still using the Carousel codebase. Common.
- The Product Carousel — displays multiple products in a scrollable row, typically with overflow clipping. At mobile widths, this is a genuinely useful pattern. At desktop widths, it hides inventory the user cannot see, which is a commercial as well as a design problem.
- The Testimonial Rotator — cycles through customer quotes. The creature's most benign subspecies, since users do not typically arrive seeking testimonials. Its low-stakes nature means its inaccessibility is rarely noticed and therefore rarely fixed.
- The Fullscreen Image Carousel — occupies the entire viewport with large imagery. Visually impressive. Frequently omits keyboard navigation, accessible labels, and pause controls simultaneously. The Order has issued multiple field advisories.
- The Image Lightbox — a separate creature often misclassified as a Carousel variant. The Lightbox opens in response to a direct user action (clicking an image), displays an expanded version, and allows navigation through a related set. Its purpose is exploration, not promotion. It carries its own accessibility requirements and is documented separately.
edit_note Field Notes
Note I. — Before summoning a Carousel, ask one question: if you could only show one slide, which would it be? If the answer is immediate, display that slide and remove the mechanism. If the answer is genuinely uncertain because all slides carry equivalent weight, the content strategy requires attention before the component does.
Note II. — The transition between slides communicates the Carousel's character. A transition that takes longer than 300ms feels slow. A transition that uses lateral movement (slide left/right) is the most disorienting for users with vestibular disorders. A cross-fade transition is the least harmful motion style available. If prefers-reduced-motion is honoured, the transition can be instant — the content change is informative regardless of animation.
Note III. — Never rely on the Carousel to communicate critical information. If a message is important enough that the user must receive it, it must not be hidden behind a rotation that the user may never trigger. Critical messages belong in persistent, stationary elements. The Carousel is for supplementary content that enhances rather than informs.