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

An extensible low level carousel for the web, written in TypeScript.

  DEMO PAGE  

«  OPTIONS   |   THE API  »

 

Installation

NPM

npm install embla-carousel

import EmblaCarousel from 'embla-carousel'

QuickStart

HTML

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

CSS

.embla {
  overflow: hidden;
}

.embla__container {
  display: flex;
  will-change: transform;
}

.embla__slide {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
}

JavaScript

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

Options

Configure Embla by passing an options object as the second argument. Default options values are:

const embla = EmblaCarousel(emblaNode, {
  align: 'center',
  containerSelector: '*',
  slidesToScroll: 1,
  containScroll: false,
  draggable: true,
  dragFree: false,
  loop: false,
  speed: 10,
  startIndex: 0,
  selectedClass: 'is-selected',
  draggableClass: 'is-draggable',
  draggingClass: 'is-dragging',
})

align   ^{type: string}

Align the slides relative to the carousel viewport.
⭐ demo - start · center · end

containerSelector   ^{type: string}

A query selector for the container that holds the slides, where all immediate children will be treated as slides.
⭐ demo - * · .my-classname

slidesToScroll   ^{type: number}

Scrolls past given number of slides whether scroll is triggered by the API methods or drag interactions.
⭐ demo - 1 · 2

containScroll   ^{type: boolean}

Contains slides to carousel viewport to prevent excessive scrolling at the beginning or end.
⭐ demo - false · true

draggable   ^{type: boolean}

Allow mouse & touch interactions to scroll the carousel.
⭐ demo - true · false

dragFree   ^{type: boolean}

Determines if the carousel should snap to a slide position after mouse & touch interactions.
⭐ demo - false · true

loop   ^{type: boolean}

Determines if the carousel should loop when start or end is reached.
⭐ demo - false · true

speed   ^{type: number}

Carousel speed when using buttons to navigate. A higher number will make transitions faster.
⭐ demo - 10 · 15

startIndex   ^{type: number}

Zero based index of the starting slide when carousel mounts.
⭐ demo - 0 · 3

selectedClass   ^{type: string}

Classname that will be applied to the selected slide.
⭐ demo - is-selected · my-class

draggableClass   ^{type: string}

Classname that will be applied to the wrapper when the carousel mounts if draggable.
⭐ demo - is-draggable · my-class

draggingClass   ^{type: string}

Classname that will be applied to the wrapper when a pointer is dragging the carousel.
⭐ demo - is-dragging · my-class

API

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

embla.scrollNext()
embla.scrollTo(2)
embla.changeOptions({ loop: true })
embla.on('select', () => {
  console.log(`Selected snap index is ${embla.selectedScrollSnap()}!`)
})

...and the methods are:

containerNode()
Returns the current container element node.

slideNodes()
Returns the slides as an array of element nodes.

scrollNext()
Scrolls to next snap point if possible. If loop: false and the carousel is on the last snap point this method will do nothing.

scrollPrev()
Scrolls to previous snap point if possible. If loop: false and the carousel is on the first snap point this method will do nothing.

scrollTo(index)
Scrolls to the snap point that matches the passed index. If loop: true the carousel will seek the closest way to the target.

canScrollPrev()
Returns if it's possible to scroll to a previous snap point. Note that if loop: true this will always return true.

canScrollNext()
Returns if it's possible to scroll to a next snap point. Note that if loop: true this will always return true.

selectedScrollSnap()
Returns the index of the selected snap point. Each snap point scrolls more than one slide if slidesToScroll > 1. Zero-based.

previousScrollSnap()
Returns the index of the previous snap point. Each snap point scrolls more than one slide if slidesToScroll > 1. Zero-based.

scrollSnapList()
Returns an array of all scroll snap points, each containing slide numbers and slide nodes. If total slide count is 4 and slidesToScroll: 2, it means that every scroll snap point contains 2 slides because any scroll triggered by scrollNext() or scrollPrev() will scroll 2 slides at a time.

changeOptions(options)
Applies passed options by doing all the necessary calculations and reinitialising the carousel from scratch.

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

• init - When the carousel has been initialised for the first time.
• destroy - When the carousel has been destroyed.
• select - When a new target slide has been selected.
• resize - When window size changes.
• dragStart - When carousel dragging begins.
• dragEnd - When carousel dragging ends.

off(event, callback)
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.

Browser Support

•   IE - 11

•   Edge - Latest 2 versions

•   Chrome - Latest 2 versions

•   Firefox - Latest 2 versions

•   Safari - Latest 2 versions

Contribution

Thank you to all the people who already contributed to Embla Carousel 🙏!
Do you like this project and want to contribute to it?

• I just want to support it: Thank you! Give it a star maybe ⭐?
• I want to spread the word: You're a star! Why not twitter or similar 📣?
• I want to get my hands dirty: Awesome! Read the contribution guidelines first 📋.

License

^{Copyright © 2019-present, David Cetinkaya.}
Embla is MIT licensed.