Shadcn Carousel

A carousel is a track of slides you swipe or step through with arrows. One item fills the row by default; set basis on CarouselItem to show more. Use it for product photos, quote rows, and any list that should not take the whole page.

Usage

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

<Carousel>
  <CarouselContent>
    <CarouselItem>1</CarouselItem>
    <CarouselItem>2</CarouselItem>
    <CarouselItem>3</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Items default to basis-full. opts goes to Embla — align: "start" and loop: true are the usual ones.

Composition

Sizes

basis-1/2 or lg:basis-1/3 on CarouselItem. Default is basis-full.

Spacing

Override the default pl-4 / -ml-4. pl-1 on the item, -ml-1 on the content.

Orientation

orientation="vertical". Give CarouselContent a height or the track collapses.

API

setApi gives you the Embla instance. selectedScrollSnap() is the current index.

Plugins

plugins={[Autoplay({ delay: 2000 })]}. Stop on hover with the plugin’s stop and reset.

RTL

Wrap with DirectionProvider and dir="rtl". Set opts.direction to "rtl" and rotate the arrows with rtl:rotate-180.

API Reference

CarouselPrevious / CarouselNext

CarouselContent and CarouselItem take className. Import CarouselApi when you use setApi.

Keyboard

Left and right still fire when the track is vertical.

Notes

opts.loop keeps both arrows enabled at the ends.

With other components

Questions

Related