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. It doesn’t come with many options - just a few useful methods. Extend it with some very basic JavaScript and build awesome things! It's is 100% open source and free to use on both personal and commercial projects.
See the demo page.
If you are using a module bundler...
yarn add embla-carousel
import EmblaCarousel from 'embla-carousel'
const embla = EmblaCarousel(document.getElementById('embla'))
...or manually inject this script into your website.
<script src="embla.min.js"></script>
<script>
const embla = EmblaCarousel(document.getElementById('embla'))
</script>
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!
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: '*',
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.
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.
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 set to 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...
import EmblaCarousel from 'embla-carousel'
const embla = EmblaCarousel(document.getElementById('embla'))
embla.next()
...and the methods are:
containerNode()
Returns the current container element node.
slideNodes()
Returns the slides as an array of element nodes.
selectedIndex()
Returns the current selected index. Each index contains multiple slides if groupSlides options is set to more than 1. If groupCells is set to 1 each slide has its own index. Zero-based.
previousIndex()
Returns the previous selected index. Each index contains multiple slides if groupSlides options is set to more than 1. If groupCells is set to 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 set to 2, it will return [[0, 1], [2, 3]].
next()
Moves to next item. If loop option is set to false and the carousel is on the last slide this method will do nothing.
previous()
Moves to previous item. If loop option is set to 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 set to true the carousel will seek the closest way to the passed index.
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.
Embla is MIT licensed.
FAQs
A lightweight carousel library with fluid motion and great swipe precision
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.