CDN

Start by including the Embla Carousel script from a CDN with a script tag:

<script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script>

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.

<script type="text/javascript">  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)</script>

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:

<script src="https://unpkg.com/embla-carousel/embla-carousel.umd.js"></script><script src="https://unpkg.com/embla-carousel-autoplay/embla-carousel-autoplay.umd.js"></script>

Note: Plugins loaded from a CDN will be prefixed with EmblaCarousel. For example, the full plugin name becomes EmblaCarousel<PluginNameInPascalCase>, and the Autoplay plugin specifically is EmblaCarouselAutoplay.

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:

<script type="text/javascript">  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 }, [    EmblaCarouselAutoplay()  ])
  prevButtonNode.addEventListener('click', () => emblaApi.scrollToPrev(), false)  nextButtonNode.addEventListener('click', () => emblaApi.scrollToNext(), false)
  emblaApi.plugins().autoplay?.play()</script>

Congratulations! You just created your first Embla Carousel.

Edit this page on GitHub