React Carousel Component Examples

The minimum carousel is a root with a Carousel.Content and a list of Carousel.Item children. Each item is min-w-0 shrink-0 grow-0 basis-full by default, so one slide fills the viewport at a time. Add Carousel.Previous and Carousel.Next as siblings inside the root and you get a slider with prev/next chevron buttons positioned outside the viewport at -left-12 and -right-12.

The arrow buttons disable themselves automatically when there is no previous or next slide — the Carousel source tracks canScrollPrev and canScrollNext from the Embla API and passes them as the disabled prop on the underlying Button. Keyboard arrow keys work without any extra wiring: focus the carousel, press Left or Right, and Embla scrolls.

Carousel.Dots reads everything it needs from context, so adding pagination is one self-closing tag inside the root. The component maps over scrollSnaps — the array the root captures from api.scrollSnapList() once Embla mounts — renders a <button type="button"> per snap point, and marks the current one by comparing i === selectedIndex, which stays in sync through Embla's select and reInit events. Clicking a dot calls api?.scrollTo(i). None of that plumbing reaches your page: no useState, no effect, no snap bookkeeping.

The styling stays deliberately small — flex justify-center gap-1.5 mt-3 on the wrapper, w-2 h-2 rounded-full bg-border per dot, bg-foreground on the active one — and every button carries an aria-label of the form "Go to slide 3", so the control is usable without sight of the row. Dots and arrows are independent. Render both once the deck runs past three or four slides and the reader benefits from position feedback plus stepping; keep dots alone for a touch-first mobile gallery where the Button-based arrows would crowd the frame. For a single hero image, drop both and let drag carry it.

Pass opts={{ loop: true }} on the Carousel root and Embla wraps around — scrolling past the last slide returns to the first, and canScrollPrev stays true at the start. Loop mode is the right default for testimonial sliders, autoplay banners, and any carousel where the slide order is not chronological. For step-by-step onboarding flows, leave loop off so the prev arrow disables on the first slide and the next arrow disables on the last.

The opts prop accepts every option from EmblaOptionsType — alignment (align: 'start' | 'center' | 'end'), drag-free mode, slide-skip behavior, and so on. The full option list lives in the Embla docs; Drivn forwards the object verbatim to useEmblaCarousel without any transformation.

By default each Carousel.Item has basis-full, so one slide fills the viewport. Override the basis class on each item — basis-1/3 for three per view, basis-1/2 for two, basis-1/4 for four — and the carousel renders multiple slides at once with the rest queued for scroll. Pair it with opts={{ align: 'start' }} so the leftmost visible slide aligns to the left edge of the viewport rather than centering.

This is the right pattern for product card rows, image grids that scroll horizontally, or category tile carousels. The combination of basis-1/3 and align: 'start' is the most common — three cards visible, the user can drag or click to reveal the next set. For responsive layouts, swap basis classes via Tailwind breakpoints: basis-full md:basis-1/2 lg:basis-1/3.

Set orientation="vertical" on the root and the carousel scrolls top-to-bottom instead of left-to-right. The Carousel source flips the Embla axis to y, swaps the container layout to flex-col, and changes the item spacing class from pl-4 to pt-4. The Carousel.Content needs an explicit height — h-[300px] works for most cases — because vertical scroll needs a bounded container.

Vertical carousels are less common but show up in mobile-first feeds, sidebar navigation, and timeline-style content. The arrow buttons still work but their default position is tuned for horizontal layouts; override className on Carousel.Previous and Carousel.Next if you want them above and below the slides instead of left and right.