This documentation is for v9.0.0-rc04. While v9 is currently in RC, it can be considered stable as several known bugs from previous versions have been fixed.

If you still prefer to use the latest stable release, see the v8 documentation .

Module

Start by installing the Embla Carousel npm package and add it to your dependencies.

npm install embla-carousel --save

The HTML structure

A recommended setup uses an overflow wrapper and a scroll container, though the outer wrapper is optional. The element with the class name embla__viewport serves as both the root and the overflow wrapper. To avoid drag conflicts, place navigation buttons outside the viewport. Start by adding the following HTML structure to your carousel:

<div class="embla">  <div class="embla__viewport">    <div class="embla__container">      <div class="embla__slide">Slide 1</div>      <div class="embla__slide">Slide 2</div>      <div class="embla__slide">Slide 3</div>    </div>  </div>
  <button class="embla__prev">Scroll to prev</button>  <button class="embla__next">Scroll to next</button></div>

The element with the classname embla__viewport acts as an overflow wrapper, ensuring that any scroll overflow is hidden. The element with the classname embla__container is the scrollable area that holds and moves the slides. Add the following CSS to style these elements:

.embla__viewport {  overflow: hidden;}
.embla__container {  display: flex;  touch-action: pan-y pinch-zoom;}
.embla__slide {  flex: 0 0 100%;  min-width: 0;}

Select the element with the classname embla__viewport and pass it as the first argument to the EmblaCarousel constructor. This will initialize your carousel and provide full access to the Embla Carousel API.

import EmblaCarousel from 'embla-carousel'
const wrapperNode = document.querySelector('.embla')const viewportNode = wrapperNode.querySelector('.embla__viewport')const prevButtonNode = wrapperNode.querySelector('.embla__prev')const nextButtonNode = wrapperNode.querySelector('.embla__next')
const emblaApi = EmblaCarousel(viewportNode, { loop: false })
prevButtonNode.addEventListener('click', () => emblaApi.goToPrev(), false)nextButtonNode.addEventListener('click', () => emblaApi.goToNext(), false)

Adding plugins

Plugins let you extend your carousel with additional features beyond the built-in core functionality. To get started, install the plugin you want to use. In this example, we'll add the Autoplay plugin:

npm install embla-carousel-autoplay --save

You can pass an optional plugin array as the third argument when initializing Embla Carousel. Here's how to extend the carousel from the previous example with Autoplay:

import EmblaCarousel from 'embla-carousel'import Autoplay from 'embla-carousel-autoplay'
const wrapperNode = document.querySelector('.embla')const viewportNode = wrapperNode.querySelector('.embla__viewport')const prevButtonNode = wrapperNode.querySelector('.embla__prev')const nextButtonNode = wrapperNode.querySelector('.embla__next')
const emblaApi = EmblaCarousel(viewportNode, { loop: false }, [Autoplay()])
prevButtonNode.addEventListener('click', () => emblaApi.goToPrev(), false)nextButtonNode.addEventListener('click', () => emblaApi.goToNext(), false)
emblaApi.plugins().autoplay?.play()

Congratulations! You just created your first Embla Carousel.

Edit this page on GitHub