Embla Carousel Reference

Embla Carousel provides fluid, touch-friendly carousel behavior. Build carousel visuals with local Tailwind components so the carousel matches the app's design.

Overview

Import useEmblaCarousel from embla-carousel-react when you need swipeable carousel behavior. Use local buttons, panels, and indicators for the visual treatment.

Usage

A basic carousel attaches the emblaRef returned by useEmblaCarousel to an overflow-hidden viewport. The direct hook accepts options such as align: "start", loop: true, and dragFree: true. For multiple visible items, use responsive basis classes like basis-1/2, md:basis-1/3, or lg:basis-1/4 on each slide.

For imperative navigation, use the Embla API instance returned by useEmblaCarousel. Useful methods include scrollNext(), scrollPrev(), scrollTo(index), canScrollNext(), canScrollPrev(), selectedScrollSnap(), scrollSnapList(), on(event, callback), and off(event, callback).

Best practices

Use local Tailwind controls for standard app UI, set responsive basis classes for multi-item layouts, add dot indicators for touch-heavy flows, and consider loop for continuous browsing.