The embla-carousel JavaScript library which helps developers to create a responsive, customizable, mobile-friendly carousel component on the web app.
Fully responsive based on CSS flexbox.
Install & download.
## Yarn
$ yarn add embla-carousel
## NPM
$ npm install embla-carousel --save
Import the embla-carousel.
import EmblaCarousel from 'embla-carousel'
Or load the compiled JavaScript in the document.
<script src="https://unpkg.com/embla-carousel"></script>
Add slides to the embla carousel.
<div class="embla" id="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>
Initialize the embla carousel.
const embla = EmblaCarousel(document.getElementById('embla'))
The basic CSS styles for the embla carousel.
.embla {
overflow: hidden;
}
.embla__container {
display: flex;
will-change: transform;
}
.embla__slide {
position: relative;
flex: 0 0 auto;
width: 100%;
}
Available options to customize the embla carousel.
const embla = EmblaCarousel(document.getElementById('embla'),{
// or start, center,end, number
align: 'center',
// or 'y'
axis: 'x',
// parent container
containerSelector: '*',
// choose between keeping redundant snap points or trimming them
// 'trimSnaps' or 'keepSnaps'
containScroll: '',
// the number of slides to show per page
slidesToScroll: 1,
// contains slides to the carousel viewport to prevent excessive scrolling at the beginning or the end
containScroll: false,
// enable draggable
draggable: true,
dragFree: false,
// infinite loop
loop: false,
// animation speed
speed: 10,
// start index
// 0 = slide 1
startIndex: 0,
// default CSS classes
selectedClass: 'is-selected',
draggableClass: 'is-draggable',
draggingClass: 'is-dragging'
})
Available API methods that can be used for creating your own carousel controls.
// gets the container node
embla.containerNode()
// returns an array of slide nodes
embla.slideNodes()
// gets the current slide
embla.selectedScrollSnap()
// returns an array of numbers representing the scroll progress for each snap point
embla.scrollSnapList()
// gets the previous slide
embla.previousScrollSnap()
// checks if has previous slide
embla.canScrollPrevious()
// checks if has next slide
embla.canScrollNext()
// goes to the next slide
embla.scrollNext()
// goes to the previous slide
embla.scrollPrevious()
// goes to a specific slide
embla.scrollTo(index: number);
// updates options
embla.reInit(options: options);
// gets the current scroll progress
embla.scrollProgress();
// mimics how CSS scroll snap behaves on mobile
// returns true or false
embla.clickAllowed();
// destroys the instance
embla.destroy()
Event handlers.
// embla.on(event, callback)
// embla.off(event, callback)
embla.on('init', function(e){
// on init
})
embla.on('destroy', function(e){
// on destroy
})
embla.on('select', function(e){
// on a slide selected
})
embla.on('pointerDown', function(e){
// on dragStart
})
embla.on('pointerUp', function(e){
// on dragEnd
})
embla.on('click', function(e){
// on click
})
embla.on('scroll', function(e){
// on scroll
})
embla.on('settle', function(e){
// allows users to hook onto when the carousel has stopped scrolling
})
Author: davidcetinkaya
Demo: https://davidcetinkaya.github.io/embla-carousel/
Source Code: https://github.com/davidcetinkaya/embla-carousel
#javascript