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.

 Examples 

 Generator 

 Installation 

Ready for

Contributors

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

Special Thanks

^{gunnarx2 - React wrapper useEmblaCarousel.
LiamMartens - Solid wrapper createEmblaCarousel.
donaldxdonald, zip-fa, JeanMeche - Angular wrapper EmblaCarouselDirective.
xiel - Plugin Embla Carousel Wheel Gestures.
zaaakher - Contributing guidelines.}

Open Source

Embla is MIT licensed 💖.

^{Embla Carousel - Copyright © 2019-present.
Package created by David Jerleke.}

· · ·

Thanks BrowserStack.