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 minimal setup requires an overflow wrapper and a scroll container. Start by adding the following HTML structure to your carousel:

<div class="embla">
  <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>

The wrapping element with the classname embla is needed to cover the scroll overflow. The element with the container classname is the scroll body that scrolls the slides. Continue by adding the following CSS to these elements:

.embla {
  overflow: hidden;
}
.embla__container {
  display: flex;
}
.embla__slide {
  position: relative;
  flex: 0 0 100%;
}

Adding JavaScript

Now you're ready to add some JavaScript magic to give life to your first Embla Carousel. Make sure to place your script after the CDN script tag. Grab the element with the classname embla and pass it as the first argument to the EmblaCarousel function.

<script type="text/javascript">
  var emblaNode = document.querySelector('.embla')
  var options = { loop: false }

  var embla = EmblaCarousel(emblaNode, options)
</script>

Adding plugins

When adding plugins, you need to make sure that the script that activates your carousel is placed after the script tag that loads the Embla Carousel core package and the plugins:

<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>

Plugins included from a CDN will be prefixed with EmblaCarousel. Here's an example that shows how to add plugins to your carousel:

<script type="text/javascript">
  var emblaNode = document.querySelector('.embla')
  var options = { loop: false }
  var plugins = [EmblaCarouselAutoplay()] // Plugins

  var embla = EmblaCarousel(emblaNode, options, plugins)
</script>

Congratulations! You just created your first Embla Carousel.

Edit this page on GitHub