# Carousels
A row of slides seen one or a few at a time: tours, photos, reviews. The browser scrolls and snaps the row - a swipe, a wheel, the arrow keys - and the buttons move a slide back or on.
## Examples
`carousel` on the frame, a named region; `carousel-inner` on the row, which takes the focus; `carousel-item` on each slide. Buttons with `command="--prev"` or `"--next"` and `aria-controls` naming the carousel move a slide, round the ends. An empty `carousel-indicators` fills with a button per slide. The slide in place is `aria-current="true"`.
```html
North Bay marine parkKayaks, a lagoon and a viewpoint, a day by speedboat.
Turtle Cove snorkelingTwo bays and a coral garden, lunch on board.
Sunset cruiseA catamaran round the south coast at dusk.
```
### Several at a time
Three custom properties on the carousel set the row, in the module's own stylesheet: `--redz-carousel-items` slides in view, `--redz-carousel-gap` between them and `--redz-carousel-peek` of the next one at the edges. `carousel-center` snaps a slide to the middle, `carousel-auto` lets each slide keep its own width.
```js
.tour-reviews { --redz-carousel-items: 2; --redz-carousel-gap: 12px; --redz-carousel-peek: 24px; }
```
```html
“The best day of our trip.” - Anna
“Kind guides and a clean boat.” - Mark
“The lagoon is worth the climb.” - Somchai
“Lunch was a surprise, a good one.” - Leila
```
### One at a time, fading, playing
`carousel-fade` stacks the slides and shows the current one. `carousel-overlay` lays its buttons over the slides. A button with `command="--play"` plays the slides on every 5 seconds while it is `aria-pressed="true"` - written so, it plays from the start - and pauses while the pointer rests on the carousel or the focus is in it; it never plays for a person who asks for less motion.
```html
Beaches
Waterfalls
Temples
```
## Keyboard and accessibility
- The carousel is a named region and each slide a group named by the page's text `slide` - “2 of 5”; an indicator button says the same, the current one `aria-current="true"`.
- The row takes the focus (`tabindex="0"` and a name): the arrow keys scroll it, a slide at a time in a fading carousel.
- A slide a person moves to by a button is told politely in a status of the carousel; nothing is told while it plays.
- The play button is a toggle button, pressed while it plays; the pointer resting on the carousel, the focus inside it and a hidden page pause it (WCAG 2.2.2).
- The buttons have no `commandfor`, which WebKit would announce as collapsed; their icons mirror right to left. An indicator is a 24 px target round its dot.
## Tokens
From [`css/components/carousel.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/carousel.css). It declares `--redz-carousel-items`, `--redz-carousel-gap`, `--redz-carousel-peek` on its root, never on rows or items.
It reads the theme's `--redz-space-12`, `--redz-radius-12`, `--redz-space-8`, `--redz-border-strong`, `--redz-text`, `--redz-ease`.
## From Bootstrap 5.3
| Bootstrap 5.3 | REDZ.UI | Change | Note |
| --- | --- | --- | --- |
| `carousel-caption` | - | review | the slide's own text, laid out with utilities |
| `carousel-control-next` | - | review | a btn btn-icon with command="--next" and aria-controls naming the carousel |
| `carousel-control-next-icon` | `bi bi-chevron-right` | rename | mirrored right to left |
| `carousel-control-prev` | - | review | a btn btn-icon with command="--prev" and aria-controls naming the carousel |
| `carousel-control-prev-icon` | `bi bi-chevron-left` | rename | mirrored right to left |
| `carousel-dark` | - | review | data-theme="dark" on the carousel |
| `carousel-item-end` | - | remove | the browser scrolls the row |
| `carousel-item-next` | - | remove | the browser scrolls the row |
| `carousel-item-prev` | - | remove | the browser scrolls the row |
| `carousel-item-start` | - | remove | the browser scrolls the row |
| `data-bs-slide="prev"` | `command="--prev" aria-controls="ID"` | trigger | the id of the carousel, without commandfor |
| `data-bs-slide="next"` | `command="--next" aria-controls="ID"` | trigger | the id of the carousel, without commandfor |
| `data-bs-slide-to` | - | remove | an empty carousel-indicators makes its buttons |
| `data-bs-ride` | `command="--play" aria-pressed="true"` | review | a play button pressed from the start, which a person who asks for less motion never sees play |
| `data-bs-interval` | - | remove | slides turn every 5 seconds |
| `bootstrap.Carousel` | `the --prev and --next buttons` | review | or scrollBy on carousel-inner; the row scrolls by the browser |