# Carousel

> An accessible WAI-ARIA carousel with autoplay, dot indicators, arrow controls, and keyboard navigation — content slides built from gradient panels, no external images, fully token-driven and design-system agnostic.

- Category: Carousel
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Caret
- Dark mode: yes
- Access: free (sign in to copy the code)
- Tags: slider, media
- Page: https://builder.atheros.ai/components/carousel
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_carousel/preview-8143fecf8587.webp

## Features

- WAI-ARIA carousel pattern with region, slide groups, and polite live announcements
- Five self-contained content slides (gradient panel, Tabler icon, heading, caption) — no external images
- Slide transitions via `transform: translateX()` on the track — never animates layout properties
- Prev/Next arrow buttons and a row of dot indicators with `aria-current`
- Autoplay every 4s that pauses on hover, focus-within, and tab hidden, with a play/pause toggle
- Respects `prefers-reduced-motion` — autoplay and transitions are disabled
- Keyboard navigation (Left/Right arrows) with looping wrap-around

## Accessibility

- **Carousel region** — `role="region"` `aria-roledescription="carousel"` with `aria-label`
- **Slide groups** — `role="group"` `aria-roledescription="slide"` `aria-label="N of M"`
- **Live region** — `aria-live="polite"` announces the active slide
- **Theme toggle** — `role="switch"` with `aria-checked` toggled by JS
- **Dot indicators** — `<button>` with `aria-current="true"` on the active dot
- **Play/pause** — `<button>` with `aria-pressed` reflecting autoplay state
- **Keyboard nav** — `ArrowLeft`/`ArrowRight` move slides when the region is focused
- **Focus indicators** — `:focus-visible` with `--ring` outline on all elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables animations and autoplay
- **Viewport** — `100dvh` for mobile-safe viewport height

## Keyboard shortcuts

- `ArrowLeft` — Previous slide
- `ArrowRight` — Next slide

## Common questions

**Which frameworks is Carousel available in?**

Carousel ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Carousel free?**

Yes. Carousel is a free component: preview it without an account, and sign in with a free Atheros account to copy or download the full source and customise it with AI.

**Does Carousel support dark mode?**

Yes. Carousel ships light and dark themes, both drawn from the Caret design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Carousel live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/carousel

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt