Back to Components
New

Carousel

A carousel component with motion and swipe capabilities for cycling through elements.

data-display
slider
gallery
images

Preview

1
2
3
4
5

Code

TSX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import {
      Carousel,
      CarouselContent,
      CarouselItem,
      CarouselNext,
      CarouselPrevious,
    } from "@/components/ui/carousel"

    export function CarouselDemo() {
      return (
        <Carousel className="w-full max-w-xs">
          <CarouselContent>
            {Array.from({ length: 5 }).map((_, index) => (
              <CarouselItem key={index}>
                <div className="p-1">
                  <div className="flex aspect-square items-center justify-center p-6 text-2xl font-semibold">
                    {index + 1}
                  </div>
                </div>
              </CarouselItem>
            ))}
          </CarouselContent>
          <CarouselPrevious />
          <CarouselNext />
        </Carousel>
      )
    }

API Reference

PropTypeDefaultDescription
optsCarouselOptions-Options for the carousel.
orientationhorizontal | verticalhorizontalThe orientation of the carousel.
setApifunction-A function that receives the carousel API object.
pluginsCarouselPlugin-Plugins for the carousel.
View Full Documentation