# Carousel (/media/carousel)





<ComponentPreview name="carousel-preskok-demo" description="A simple carousel with five items and navigation controls." />

## Installation [#installation]

```bash
npx shadcn@latest add @preskok/carousel
```

## Usage [#usage]

```tsx
import { Carousel } from "@/components/ui/preskok-ui/carousel"

export function CarouselDemo() {
  return (
    <Carousel className="w-full max-w-md">
      <Carousel.Content>
        {[1, 2, 3].map((n) => (
          <Carousel.Item key={n}>
            <div className="aspect-square p-4">{n}</div>
          </Carousel.Item>
        ))}
      </Carousel.Content>
      <Carousel.Handler>
        <Carousel.Button segment="previous" />
        <Carousel.Button segment="next" />
      </Carousel.Handler>
    </Carousel>
  )
}
```

## Props [#props]

| Component          | Key Props                                        |
| ------------------ | ------------------------------------------------ |
| `Carousel`         | `orientation`, `opts`, `plugins`, `setApi`       |
| `Carousel.Content` | -                                                |
| `Carousel.Item`    | -                                                |
| `Carousel.Handler` | -                                                |
| `Carousel.Button`  | `segment` (`"previous" \| "next"`), button props |