# Carousel

Slides seen one at a time through a viewer’s gate: transport keys either side of a frame counter on an LCD, lamp keys to jump, swipe on touch. Nothing moves on its own unless you ask it to.

Kit part · With the Kit · https://tactileui.dev/parts/carousel

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

A custom element that moves its slides into a track and builds the gate and the bar around them. Under reduced motion the keys jump instead of gliding.

## Variants

- Captions under pictures
- Quotes · stop key first

## States

- Rest
- Hover
- Pressed
- Focus
- Disabled

## Props and options

| Name | Kind | Description |
| - | - | - |
| label | attribute | Names the carousel. |
| autoplay | attribute | Advance on a timer. Adds a stop key first in the bar; hover or focus holds it; reduced motion never starts it. |
| index | attribute · property | The slide in the gate. Setting the property scrolls there. |
| go(i) | method | Bring slide i into the gate. |
| change | event | A different slide is in the gate. |
| ArrowLeft · ArrowRight | keyboard | Previous and next slide. Home and End: the first and last. |
| Swipe | touch | Scroll snapping, one slide per swipe (scroll-snap-stop). |

## Usage notes

Use the keys, the lamps, a swipe, or Tab to the gate and use the arrow keys. Watch the counter.

## Accessibility

- The WAI-ARIA carousel pattern.
- The gate is a polite live region while nothing rotates, so a change of slide is read out; during rotation it is silent, and focus or hover holds it.
- Keys have names (“Next slide”, “Slide 3.

## Related parts

- [LCD](https://tactileui.dev/parts/lcd): A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
- [Icon key](https://tactileui.dev/parts/icon-key): A key with an icon and no words, square or round: transport, power, the small tools. Its aria-label names it; a tip shows the name.