embla-carousel
Advanced tools
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.
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());
});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 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 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.
An extensible low level carousel for the web, written in TypeScript.
Embla’s purpose is to provide a low level carousel and allow developers to extend it by using its available methods. Extend it with some very basic JavaScript and build awesome physics simulated carousels. It’s dependency free and 100% open source.
Try it here on the Demo Page or CodeSandbox ✨.
Responsive out of the box - Choose any %-based slide widths.Seamless loop effect - No pauses or previous/next button throttling.Hardware accelerated - Smooth physics simulated animations.Extensible rich API - Comes with a low-level API to control the carousel.Realistic drag handling - Authentic cross device drag behaviour.If you are using a module bundler...
yarn add embla-carousel
import EmblaCarousel from 'embla-carousel'
...or manually inject this script into your website.
<script src="embla.min.js"></script>
Setup your HTML markup...
<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>
...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...
const emblaNode = document.querySelector('.embla')
const options = { loop: true }
const embla = EmblaCarousel(emblaNode, options)
...and you're good to go!
Embla comes with a few optional settings that you can change by passing an object as the second argument. Default values are:
const embla = EmblaCarousel(emblaNode, {
align: 'center',
containerSelector: '*',
groupSlides: 1,
draggable: true,
dragFree: false,
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.
containerSelector (string: querySelectorString)
The selector to use for the container that holds the slides. Embla will use all immediate children of this node as slides.
groupSlides (number)
Groups slides together into groups of given size and makes each group act as a single slide.
draggable (boolean)
Allow mouse and touch interactions to move the carousel.
dragFree (boolean)
Determines if the carousel should snap to a slide position after mouse and touch interactions.
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 true.
draggingClass (string)
Classname that will be applied to the wrapper when a pointer is dragging the carousel.
Embla exposes a set of methods upon setup that can be used to control the carousel externally. Example usage looks like this:
embla.next()
embla.goTo(2)
embla.changeOptions({ loop: true })
embla.on('select', () => console.log('Selected a new index!'))
...and the methods are:
containerNode()
Returns the current container element node.
slideNodes()
Returns the slides as an array of element nodes.
next()
Moves to next item. If loop option is false and the carousel is on the last slide this method will do nothing.
previous()
Moves to previous item. If loop option is false and the carousel is on the first slide this method will do nothing.
goTo(index: number)
Moves to item that matches passed index. If loop option is true the carousel will seek the closest way to the passed index.
selectedIndex()
Returns the current selected index. Each index contains multiple slides if groupSlides options is more than 1. If groupSlides is 1 each slide has its own index. Zero-based.
previousIndex()
Returns the previous selected index. Each index contains multiple slides if groupSlides options is more than 1. If groupSlides is 1 each slide has its own index. Zero-based.
groupedIndexes()
Returns an array of all slide indexes grouped into arrays according to the groupSlides option, i.e. if the total number of slides is 4 and groupSlides is 2, it will return [[0, 1], [2, 3]].
isFirstIndex()
Returns if selected index is first possible index. If loop option is false, it's not possible to slide to previous index from here.
isLastIndex()
Returns if selected index is last possible index. If loop option is false, it's not possible to slide to next index from here.
hasPreviousIndex()
Returns if it's possible to slide to previous index from here. Note that if loop option is true this will always return true.
hasNextIndex()
Returns if it's possible to slide to next index from here. Note that if loop option is true this will always return true.
changeOptions(options: options)
Applies passed options by doing all the necessary calculations and reinitialising the carousel from scratch.
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 initialised 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.
Do you like this project and want to contribute to it? Fantastic! How do you want to contribute?
I just want to support it: Thank you! Give it a star ⭐.I want to spread the word: You're a star! Spread the word on twitter or similar 📣.I want to get my hands dirty: Awesome! Read the contribution guidelines first 📋.Embla is MIT licensed.
FAQs
A lightweight carousel library with fluid motion and great swipe precision
The npm package embla-carousel receives a total of 727,091 weekly downloads. As such, embla-carousel popularity was classified as popular.
We found that embla-carousel demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.