module.mdx

title	description	order	date
Module	Learn how to setup Embla Carousel using vanilla JavaScript.	0	2021-02-21

import { Tabs } from 'components/Tabs/Tabs' import { TabsItem } from 'components/Tabs/TabsItem' import { TABS_PACKAGE_MANAGER } from 'consts/tabs'

Module

Start by installing the npm package and save it to your dependencies:

npm install embla-carousel --save

yarn add embla-carousel

---

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>

Styling the carousel

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

Accessing the carousel API

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.

import EmblaCarousel from 'embla-carousel'

const emblaNode = document.querySelector('.embla')
const options = { loop: false }
const emblaApi = EmblaCarousel(emblaNode, options)

console.log(emblaApi.slideNodes()) // Access API

Adding plugins

Start by installing the plugin you want to use. In this example, we're going to install the Autoplay plugin:

npm install embla-carousel-autoplay --save

yarn add embla-carousel-autoplay

Embla Carousel accepts an optional plugin array as the third argument. Here's a basic example of how to make use of it:

import EmblaCarousel from 'embla-carousel'
import Autoplay from 'embla-carousel-autoplay'

const emblaNode = document.querySelector('.embla')
const options = { loop: false }
const plugins = [Autoplay()]
const emblaApi = EmblaCarousel(emblaNode, options, plugins)

Congratulations! You just created your first Embla Carousel.