Carousel

A slideshow component built on Embla Carousel.

Installation

bash
npx shadcn@latest add carouselnpm install embla-carousel-react

Import

import {  Carousel,  CarouselContent,  CarouselItem,  CarouselPrevious,  CarouselNext,} from "@/components/ui/carousel"

Basic

<Carousel className="w-full max-w-sm">  <CarouselContent>    {Array.from({ length: 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 + 1}</span>            </CardContent>          </Card>        </div>      </CarouselItem>    ))}  </CarouselContent>  <CarouselPrevious />  <CarouselNext /></Carousel>

Multiple visible items

<Carousel opts={{ align: "start" }} className="w-full max-w-sm">  <CarouselContent className="-ml-1">    {Array.from({ length: 5 }).map((_, i) => (      <CarouselItem key={i} className="pl-1 md:basis-1/2 lg:basis-1/3">        <div className="p-1">          <Card>            <CardContent className="flex aspect-square items-center justify-center p-6">              <span className="text-2xl font-semibold">{i + 1}</span>            </CardContent>          </Card>        </div>      </CarouselItem>    ))}  </CarouselContent>  <CarouselPrevious />  <CarouselNext /></Carousel>

Vertical

<Carousel orientation="vertical" className="w-full max-w-xs">  <CarouselContent className="-mt-1 h-[200px]">    {Array.from({ length: 5 }).map((_, i) => (      <CarouselItem key={i} className="pt-1 md:basis-1/2">        <div className="p-1">          <Card>            <CardContent className="flex items-center justify-center p-6">              <span className="text-3xl font-semibold">{i + 1}</span>            </CardContent>          </Card>        </div>      </CarouselItem>    ))}  </CarouselContent>  <CarouselPrevious />  <CarouselNext /></Carousel>

Autoplay

import Autoplay from "embla-carousel-autoplay"// Install: npm install embla-carousel-autoplayconst plugin = React.useRef(Autoplay({ delay: 2000, stopOnInteraction: true }))<Carousel  plugins={[plugin.current]}  onMouseEnter={plugin.current.stop}  onMouseLeave={plugin.current.reset}>  ...</Carousel>

Props

PROPTYPEDEFAULTDESCRIPTION
orientation"horizontal" | "vertical""horizontal"Scroll direction
optsEmblaOptionsType—Embla Carousel options (loop, align, etc.)
pluginsEmblaPluginType[]—Embla plugins (Autoplay, etc.)
setApi(api: CarouselApi) => void—Exposes the Embla API instance

Use basis-1/2, basis-1/3, etc. on CarouselItem to control how many items are visible.