# Carousel

Source: https://iriscss.com/documentation/components/carousel/

A row of slides that scrolls sideways and snaps to each one, with no JavaScript.

Put the slides inside `.carousel`. Swipe, scroll or use the keyboard to move. Where the browser supports scroll buttons and scroll markers, the carousel also gets previous and next buttons and a dot for each slide. Give it `tabindex="0"` and an `aria-label`, so keyboard users can reach and scroll it in every browser.

```html
<div class="carousel" style="--i-carousel-gap: 4rem; padding-inline: 3.5rem; scroll-padding-inline: 3.5rem">
  <article class="card outlined"><h4>Classless</h4><p>Plain HTML is styled with no class.</p></article>
  <article class="card outlined"><h4>Themes</h4><p>Light and dark in every color.</p></article>
  <article class="card outlined"><h4>Layers</h4><p>Your own CSS always wins.</p></article>
  <article class="card outlined"><h4>Variables</h4><p>Change any value with one property.</p></article>
  <article class="card outlined"><h4>Accessible</h4><p>Focus rings, ARIA states and user preferences.</p></article>
</div>
```

The buttons sit over the edges of the carousel. With text slides, give the carousel side padding, the same `scroll-padding-inline`, and a `--i-carousel-gap` a little wider than the padding. The buttons then sit in empty gutters beside the text, and the next slide stays out of sight.

## Images

Any element can be a slide, usually a `figure`. The photos come from [Picsum](https://picsum.photos).

```html
<div class="carousel" style="--i-carousel-item-width: 15rem">
  <figure><img src="/android-chrome-512x512.png" alt="Iris CSS logo" width="480" height="320" style="aspect-ratio: 3 / 2; object-fit: contain"><figcaption>Iris CSS</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1015/480/320" alt="A fjord between rocky cliffs" width="480" height="320" loading="lazy"><figcaption>Fjord</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1016/480/320" alt="Red rock canyon at sunset" width="480" height="320" loading="lazy"><figcaption>Canyon</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1018/480/320" alt="A road winding through green hills" width="480" height="320" loading="lazy"><figcaption>Hills</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1019/480/320" alt="Storm clouds over the sea" width="480" height="320" loading="lazy"><figcaption>Storm</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1025/480/320" alt="A pug wrapped in a blanket" width="480" height="320" loading="lazy"><figcaption>Pug</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1036/480/320" alt="Tents in the snow below mountain peaks" width="480" height="320" loading="lazy"><figcaption>Camp</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1039/480/320" alt="A waterfall in a green forest" width="480" height="320" loading="lazy"><figcaption>Waterfall</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1043/480/320" alt="Granite cliffs above a forest river" width="480" height="320" loading="lazy"><figcaption>Valley</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1044/480/320" alt="A person by a misty mountain river" width="480" height="320" loading="lazy"><figcaption>River</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1047/480/320" alt="A narrow brick alley in a city" width="480" height="320" loading="lazy"><figcaption>Alley</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1050/480/320" alt="Sea cliffs and rock stacks" width="480" height="320" loading="lazy"><figcaption>Cliffs</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1069/480/320" alt="An orange jellyfish in blue water" width="480" height="320" loading="lazy"><figcaption>Jellyfish</figcaption></figure>
  <figure><img src="https://picsum.photos/id/1074/480/320" alt="A lioness looking at the camera" width="480" height="320" loading="lazy"><figcaption>Lioness</figcaption></figure>
</div>
```

## Slide width

Set `--i-carousel-item-width` on the carousel. A value of `100%` shows one slide at a time.

```html
<div class="carousel" style="--i-carousel-item-width: 100%">...</div>
```

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-carousel-item-width` | `100%` | Width of each slide. Lower it to show several at once. |
| `--i-carousel-gap` | `var(--i-spacing)` |  |
| `--i-carousel-button-size` | `2.5rem` |  |
| `--i-carousel-marker-size` | `0.625rem` |  |