# Carousel

> A horizontally scrolling collection of slides riding native CSS scroll snap, so swiping or scrolling advances between slides with no script in the baseline.

```ts
import { Carousel } from "@sdxc/ui";
```

The carousel root: a `<section>` stacking Carousel.Viewport and
Carousel.Controls in a column, declaring the `--ui-carousel-*`
custom properties its descendants read with per-instance defaults.

## Examples

```tsx
<Carousel aria-label={t("gallery.label")}>
	<Carousel.Viewport id="gallery-viewport">
		<Carousel.Track>
			<Carousel.Slide><img src={photo.src} alt={photo.alt} /></Carousel.Slide>
		</Carousel.Track>
	</Carousel.Viewport>
	<Carousel.Controls>
		<Carousel.Previous commandfor="gallery-viewport" aria-label={t("gallery.previous")} />
		<Carousel.Next commandfor="gallery-viewport" aria-label={t("gallery.next")} />
	</Carousel.Controls>
</Carousel>
```

## Props

Also accepts everything in `TagProps<"section">`.


### Carousel.Viewport

A `<div>` scrolling Carousel.Track along the inline axis via logical properties for correct writing direction, with mandatory scroll-snap stops; scroll padding reads `--ui-carousel-padding` to clear the track's own padding.

Also accepts everything in `TagProps<"div">`.


### Carousel.Track

The carousel's slide row: a `<div>` laying its Carousel.Slide children out in one inline row, gapped by `--ui-carousel-gap` and padded by `--ui-carousel-padding` so the first and last slide can still center.

Also accepts everything in `TagProps<"div">`.


### Carousel.Slide

A single slide: a `<div>` held at `--ui-carousel-slide-size` along the inline axis, snapping to its inline-start edge so the viewport settles on a slide boundary.

Also accepts everything in `TagProps<"div">`.


### Carousel.Controls

The carousel's control row: a `<div>` laying Carousel.Previous and Carousel.Next out as an end-aligned, vertically centered row.

Also accepts everything in `TagProps<"div">`.


### Carousel.Previous

A static control scrolling Carousel.Viewport named by `commandfor` back one slide when a hydrated `carouselControls()` mixin handles `"--ui-prev"`; custom `children` replacing the chevron still need their own `aria-label`.

| Prop | Type | Description |
| --- | --- | --- |
| `commandfor` | `string` | `id` of the Carousel.Viewport this control scrolls back through. |
| `command?` | `"--ui-prev"` | Invoker Commands verb a `carouselControls()` mixin listens for. Defaults to `"--ui-prev"`. |

Also accepts everything in `Omit<Button.Props, "commandfor" | "command">`.


### Carousel.Next

A static control scrolling Carousel.Viewport named by `commandfor` forward one slide when a hydrated `carouselControls()` mixin handles `"--ui-next"`; custom `children` replacing the chevron still need their own `aria-label`.

| Prop | Type | Description |
| --- | --- | --- |
| `commandfor` | `string` | `id` of the Carousel.Viewport this control scrolls forward through. |
| `command?` | `"--ui-next"` | Invoker Commands verb a `carouselControls()` mixin listens for. Defaults to `"--ui-next"`. |

Also accepts everything in `Omit<Button.Props, "commandfor" | "command">`.