Carousel
A scrollable carousel with previous/next buttons, powered by Embla.
carousel-demo.app
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Installation
terminal.sh
npx y2kui@latest add carouselUsage
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
} from "@/components/ui/carousel"
<Carousel className="w-full max-w-xs">
<CarouselContent>
{items.map((item, i) => (
<CarouselItem key={i}>
<div className="p-4">{item}</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Scroll direction. |
opts | EmblaOptionsType | — | Embla carousel options. |
setApi | (api: CarouselApi) => void | — | Callback with the Embla API. |