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.scrollToPrev(), false)nextButtonNode.addEventListener('click', () => emblaApi.scrollToNext(), 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.scrollToPrev(), false)nextButtonNode.addEventListener('click', () => emblaApi.scrollToNext(), false)
emblaApi.plugins().autoplay?.play()

Congratulations! You just created your first Embla Carousel.

Edit this page on GitHub