Carousel
A carousel component for cycling through slides of content.
Basic
1
2
3
4
5
<VStack className="w-full max-w-xs mx-auto">
<Carousel className="w-full">
<CarouselContent>
{[1, 2, 3, 4, 5].map((i) => (
<CarouselItem key={i}>
<div className="p-1">
<Card>
<CardContent className="flex aspect-square items-center justify-center p-6">
<span className="text-4xl font-semibold">{i}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</VStack>Multiple items
1
2
3
4
5
6
<VStack className="w-full max-w-sm mx-auto">
<Carousel className="w-full">
<CarouselContent className="-ml-2">
{[1, 2, 3, 4, 5, 6].map((i) => (
<CarouselItem key={i} className="pl-2 basis-1/3">
<div className="p-1">
<Card>
<CardContent className="flex aspect-square items-center justify-center p-2">
<span className="text-2xl font-semibold">{i}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</VStack>Two items per view
1
2
3
4
5
<VStack className="w-full max-w-md mx-auto">
<Carousel className="w-full">
<CarouselContent className="-ml-4">
{[1, 2, 3, 4, 5].map((i) => (
<CarouselItem key={i} className="pl-4 basis-1/2">
<div className="p-1">
<Card>
<CardContent className="flex aspect-video items-center justify-center p-6">
<span className="text-3xl font-semibold">{i}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</VStack>Vertical
1
2
3
4
5
<VStack className="w-full max-w-xs mx-auto">
<Carousel orientation="vertical" className="w-full">
<CarouselContent className="-mt-4 h-[250px]">
{[1, 2, 3, 4, 5].map((i) => (
<CarouselItem key={i} className="pt-4 basis-1/2">
<div className="p-1">
<Card>
<CardContent className="flex items-center justify-center p-6">
<span className="text-3xl font-semibold">{i}</span>
</CardContent>
</Card>
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</VStack>Image gallery
<VStack className="w-full max-w-md mx-auto">
<Carousel className="w-full">
<CarouselContent>
{[
"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80",
"https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=800&dpr=2&q=80",
"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?w=800&dpr=2&q=80",
].map((src, i) => (
<CarouselItem key={i}>
<div className="aspect-video overflow-hidden rounded-xl">
<img src={src} alt={`Slide ${i + 1}`} className="size-full object-cover" />
</div>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</VStack>