# Carousel

> Swipeable slides built on Embla.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/carousel.json`

## Install

```tsx
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
} from "@aspyn-io/kit";
```

### Basic

Embla-powered: drag, swipe, keyboard arrows, and snap alignment.

```tsx
<Carousel className="w-full max-w-xs">
  <CarouselContent>
    {items.map((item) => (
      <CarouselItem key={item}>…slide…</CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```

### Multiple slides per view

```tsx
<Carousel opts={{ align: "start" }}>
  <CarouselContent>
    {items.map((item) => (
      <CarouselItem key={item} className="basis-1/3">…</CarouselItem>
    ))}
  </CarouselContent>
</Carousel>
```

### Vertical

Set orientation="vertical" to stack and scroll slides top-to-bottom; give the content a fixed height.

```tsx
<Carousel orientation="vertical" opts={{ align: "start" }} className="w-full max-w-xs">
  <CarouselContent className="-mt-1 h-50">
    {items.map((item) => (
      <CarouselItem key={item} className="pt-1 basis-1/2">…</CarouselItem>
    ))}
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>
```

### With dots / API

Pass setApi to reach the Embla instance, then render pagination dots and a slide counter driven by its select events.

```tsx
const [api, setApi] = React.useState<CarouselApi>();
const [current, setCurrent] = React.useState(0);
const [count, setCount] = React.useState(0);

React.useEffect(() => {
  if (!api) return;
  setCount(api.scrollSnapList().length);
  setCurrent(api.selectedScrollSnap());
  const onSelect = () => setCurrent(api.selectedScrollSnap());
  api.on("select", onSelect);
  return () => { api.off("select", onSelect); };
}, [api]);

<Carousel setApi={setApi}>…</Carousel>
{Array.from({ length: count }).map((_, i) => (
  <button key={i} aria-current={i === current} onClick={() => api?.scrollTo(i)} />
))}
```

## Notes

- Autoplay, loop, and other behaviors via embla plugins/opts props.
- Get the API with setApi for custom pagination dots or slide counters.