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 ·

Embla is a lightweight and simple carousel plugin for the web with no dependencies. Embla's purpose is to provide a simple but yet extensible carousel 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.

• Examples
• Installation
• Usage
• Options
• API
• License

Examples

Examples are on the way...

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,
  mass: 1.5,
  speed: 10,
  startIndex: 0,
  onInit: () => false,
  onSelect: () => false,
})

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.

mass (number: 1.5 - 3)
Simulates how heavy the carousel is. A higher number will add more wiggle effect.

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.

onInit (function)
Callback that runs when the carousel has mounted.

onSelect (function)
Callback that runs when a new slide target has been selected.

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:

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

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

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

changeOptions(options)
Reinitializes the carousel with passed options. This will do all calculations and setup the carousel from scratch.

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

addEvent(node, type, listener, options)
Works just like the native addEventListener but Embla will store this event for you. Embla will kill events added this way for you when destroy is invoked.

License

Embla is MIT licensed.