Carousel

A scroll-snapping slide deck powered by Embla. Supports horizontal and vertical orientation, keyboard navigation, and an imperative API for autoplay or analytics.

1
2
3
4
5

Anatomy

  • Carousel — Root. Provides Embla context and arrow-key handling.
  • CarouselContent — The scroll container.
  • CarouselItem — Each slide. Defaults to basis-full; override with className="basis-1/3" for multi-slide layouts.
  • CarouselPrevious / CarouselNext — Pre-styled arrow buttons positioned outside the content.

Orientation

Pass orientation="vertical" to flip the scroll axis. Be sure to give the container an explicit height.

Imperative API

Use setApi to grab Embla's API for autoplay, scroll observers, or programmatic control.

Installation

Props

PropTypeDefaultDescription
orientation
"horizontal" | "vertical""horizontal"Scroll axis.
opts
EmblaOptionsType—Embla carousel options (loop, align, dragFree, etc.).
plugins
EmblaPlugin[]—Embla plugins (e.g. Autoplay).
setApi
(api: CarouselApi) => void—Receives the Embla API for imperative control.