1
2
3
4
5
"use client"
import { Card, CardContent } from "@/components/ui/preskok-ui/card"
import {
Carousel,
CarouselButton,
CarouselContent,
CarouselHandler,
CarouselItem,
} from "@/components/ui/preskok-ui/carousel"
export function CarouselPreskokDemo() {
return (
<Carousel className="w-full max-w-xs">
<CarouselContent>
{Array.from({ length: 5 }).map((_, index) => (
<CarouselItem key={index}>
<div className="p-1">
<Card>
<CardContent className="flex aspect-square items-center justify-center p-6">
<span className="text-4xl font-semibold">{index + 1}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselHandler className="justify-between">
<CarouselButton segment="previous" />
<CarouselButton segment="next" />
</CarouselHandler>
</Carousel>
)
}
Installation
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add carousel
Usage
import { Carousel } from "@/registry/preskok/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
| Component | Key Props |
|---|---|
Carousel | orientation, opts, plugins, setApi |
Carousel.Content | - |
Carousel.Item | - |
Carousel.Handler | - |
Carousel.Button | segment ("previous" | "next"), button props |