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 {  flex: 0 0 100%;  min-width: 0;}

Grab the element with the classname embla and pass it as the first argument to the EmblaCarousel constructor. This will initialize the carousel and give you access to the Embla Carousel API.

<script type="text/javascript">  const emblaNode = document.querySelector('.embla')  const options = { loop: false }  const emblaApi = EmblaCarousel(emblaNode, options)
  console.log(emblaApi.slideNodes()) // Access API</script>

Adding plugins

Start by including the plugin you want to use. In this example, we're going to include 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>

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

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

Congratulations! You just created your first Embla Carousel.

Edit this page on GitHub