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 Carousel is a bare bones carousel library with great fluid motion and awesome swipe precision. It's library agnostic, dependency free and 100% open source. Build awesome carousels by extending Embla Carousel with your own CSS and JavaScript.

 Installation 

 API Reference 

 Examples 

Platforms

Embla Carousel is ready to use with the following tools/libraries.

   

Contributors

Thank you to all contributors for making Embla Carousel awesome! Contributions are welcome.

Special Thanks

Massive thanks to gunnarx2 for creating the useEmblaCarousel hook and to xiel for creating the Embla Carousel Wheel Gestures package.

Open Source

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

· · ·