embla-carousel

What is embla-carousel?

Embla Carousel is a lightweight, extendable, and customizable carousel library for modern web applications. It provides a simple API for creating responsive and touch-friendly carousels with various customization options.

What are embla-carousel's main functionalities?

Basic Carousel Setup

This code initializes a basic Embla Carousel on an HTML element with the class 'embla'.

const emblaNode = document.querySelector('.embla');
const embla = EmblaCarousel(emblaNode);

Custom Options

This code demonstrates how to initialize an Embla Carousel with custom options such as looping and speed.

const emblaNode = document.querySelector('.embla');
const options = { loop: true, speed: 10 };
const embla = EmblaCarousel(emblaNode, options);

Adding Plugins

This code shows how to add plugins to the Embla Carousel, such as the Autoplay plugin for automatic sliding.

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

const emblaNode = document.querySelector('.embla');
const embla = EmblaCarousel(emblaNode, { loop: true }, [Autoplay()]);

Event Handling

This code demonstrates how to handle events in Embla Carousel, such as logging the selected slide index when a slide is selected.

const emblaNode = document.querySelector('.embla');
const embla = EmblaCarousel(emblaNode);

embla.on('select', () => {
  console.log('Slide selected:', embla.selectedScrollSnap());
});

Other packages similar to embla-carousel

swiper

Swiper is a modern touch slider with hardware-accelerated transitions and a wide range of features. It is highly customizable and supports various effects, autoplay, and responsive breakpoints. Compared to Embla Carousel, Swiper offers more built-in features and effects but may be heavier in terms of bundle size.

slick-carousel

Slick Carousel is a popular and fully-featured carousel library that supports multiple breakpoints, lazy loading, and various transition effects. It is easy to set up and use but may not be as lightweight or modular as Embla Carousel.

react-slick

React Slick is a React wrapper for the Slick Carousel library. It provides the same features as Slick Carousel but is designed specifically for React applications. It offers a simple API for integrating carousels into React components. Compared to Embla Carousel, React Slick is more tailored for React but may not offer the same level of customization and modularity.

README

Embla Carousel ·

Simple and sensible carousels for the web, written in TypeScript.

Embla is a lightweight and simple carousel plugin for the web. Its purpose is to provide simple and extensible carousels that feels natural to interact with. It's 100% open source and free to use on both personal and commercial projects. Use it with the module bundler of your choice or by manually injecting the script.

• Demo
• Installation
• Usage
• Options
• API
• License

Demo

See the demo page here.

Installation

If you are using a module bundler...

yarn add embla-carousel

import EmblaCarousel from 'embla-carousel'
const embla = EmblaCarousel(document.getElementById('embla'))

...or inject the minified script here into your website.

<script src="embla.min.js"></script>
<script>
  const embla = EmblaCarousel(document.getElementById('embla'))
</script>

Usage

Setup your HTML markup...

<div class="embla" id="embla">
  <div class="embla__container">
    <div class="embla__slide">
      ...
    </div>
    <div class="embla__slide">
      ...
    </div>
    <div class="embla__slide">
      ...
    </div>
  </div>
</div>

...add some CSS...

.embla {
  overflow: hidden;
}
.embla__container {
  display: flex;
  will-change: transform;
}
.embla__slide {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
}

...initialize the script and pass the element node...

import EmblaCarousel from 'embla-carousel'
const embla = EmblaCarousel(document.getElementById('embla'))

...and you're good to go!

Options

Embla comes with a few optional settings that you can change by passing an object as the second argument. Default values are:

const node = document.getElementById('embla')
const embla = EmblaCarousel(node, {
  align: 'center',
  container: '*',
  draggable: true,
  loop: false,
  speed: 10,
  startIndex: 0,
  selectedClass: 'is-selected',
  draggableClass: 'is-draggable',
  draggingClass: 'is-dragging',
})

align (string: start | center | end)
Align the slides relative to the carousel viewport.

container (string: querySelectorString)
The selector to use for the container that holds the slides. Embla will use all immediate children of this node as slides.

draggable (boolean)
Allow mouse and touch interactions to move the carousel.

loop (boolean)
Determines if the carousel should loop when start or end is reached.

speed (number: 5 - 20)
Carousel speed when using buttons to navigate. A higher number will make transitions faster. Pointer events are not affected by this.

startIndex (number)
Zero based index of the starting slide when carousel mounts.

selectedClass (string)
Classname that will be applied to the selected slide.

draggableClass (string)
Classname that will be applied to the wrapper when the carousel mounts if draggable is set to true.

draggingClass (string)
Classname that will be applied to the wrapper when a pointer is dragging the carousel.

API

Embla exposes a set of methods upon setup that can be used to control the carousel externally. Example usage looks like this...

import EmblaCarousel from 'embla-carousel'
const embla = EmblaCarousel(document.getElementById('embla'))

embla.next()

...and the methods are:

getContainer()
Gets the current container element node.

getSlides()
Gets the slides as an array of element nodes.

getSelectedIndex()
Gets the current selected slide index. First slide starts at index 0.

next()
Goes to next item. If loop is disabled and the carousel is on the last slide this method will do nothing.

previous()
Goes to previous item. If loop is disabled and the carousel is on the first slide this method will do nothing.

goTo(index: number) Goes to item that matches passed index. If loop is enabled the carousel will seek the closest way to passed index.

resize(options: options)
Useful when you're planning to change slide widths for different breakpoints or similar. This will do all the calculations and reinitialize the carousel with passed options.

on(event: string, callback: function)
Subscribes to a custom Embla event by firing the passed callback. Below is a list of events you can subscribe to:

• init - Triggers after the carousel has been initialized for the first time.
• destroy - Triggers after the carousel has been destroyed.
• select - Triggers when a new target slide has been selected.
• dragStart - Triggers when carousel dragging begins.
• dragEnd - Triggers when carousel dragging ends.

off(event: string, callback: function)
Ends subscription to a custom Embla event by removing the passed callback. This works for all events listed on the on method.

destroy()
Removes all styles applied to DOM nodes and kills all event listeners for this Embla instance.

License

Embla is MIT licensed.