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 renders a row of clickable dots underneath the slides — one per snap point, with the active dot highlighted via the bg-foreground class. Drop the tag inside the carousel root and Drivn reads the snap list from context, marks the active dot via selectedIndex === i, and calls api.scrollTo(i) on click. No useState, no useEffect, no manual scrollSnapList() plumbing — the boilerplate is in the component, not your page.

The dots can stand alone or sit alongside the prev/next arrows. Combine them when the carousel has more than three or four slides so users have both a "swipe-style" anchor (the dots) and a "click-to-step" control (the arrows). For a single-image hero where dots are visual noise, drop the Carousel.Dots tag and keep the arrows.

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.