Embla Carousel

In non-looping carousels, it is good UX to disable navigation buttons when the carousel reaches the first or last slide. To implement this, listen to the following Embla events to update your button state:

• select: Fires when the selected scroll snap changes.
• reInit: Fires when the carousel resets.

Note on Looping Carousels: In looping carousels with enough slides to wrap around, the scrollPrev and scrollNext methods always trigger scrolling, so buttons are never disabled.

Embla Carousel is designed for high performance by using minimal DOM manipulation. It does not encapsulate or wrap your elements, meaning you retain full control over your markup and structure.

Embla only modifies the DOM in two specific ways:

1. Carousel container: Applies translate3d to create the scrolling effect.
2. Carousel slides: Applies translate3d to adjust slide positions (primarily for looping functionality).

Because Embla uses inline styles for these properties, it is compatible with all frameworks and allows for highly custom layouts. Note that while the core library and official framework wrappers follow this minimal approach, certain plugins may modify the DOM further.

Plugins allow you to add advanced features to your Embla Carousel instance. Common plugin-based features include:

• Autoplay: Automatically advances the carousel slides.
• Auto Scroll: Creates a continuous, smooth scrolling effect.
• Auto Height: Automatically adjusts the carousel container height based on the current slide.
• Fade: Changes the transition effect from sliding to a fade transition.
• Class Names: Provides CSS class names for different carousel states (e.g., selected, inactive) to facilitate styling.

Embla Carousel does not assign slide sizes directly. Instead, it measures the computed dimensions of your slides as determined by your CSS. This allows you to use any layout method (Flexbox, Grid, etc.) and any CSS units.

Key Requirements:

• Slides must stack along the carousel's scroll axis (horizontally for horizontal carousels, vertically for vertical carousels).
• You have full control over widths, heights, and layout methods via CSS.

Embla Carousel provides methods to programmatically extend and control the carousel.

Key Requirements:

• Methods require an initialized carousel instance.
• Methods are accessible only while the instance is active. They become invalid after calling destroy.

To use methods, you typically access the instance returned by the Embla initialization function (or via framework-specific hooks like useEmblaCarousel in React) and call the desired method on that instance.

// Example: Accessing methods in Vanilla JS
const emblaApi = emblaApi;
if (emblaApi) {
  console.log(emblaApi.slideNodes());
}

Some events are cancellable, allowing you to prevent Embla Carousel's internal logic from executing. To cancel an event, your event handler must return false. Returning any other value (like true or undefined) allows the event to proceed normally.

// Example: Preventing dragging if allowPointerDownEvent is false
emblaApi.on('pointerdown', () => {
  if (!allowPointerDownEvent) return false
})