Embla Carousel JavaScript library that helps creators create a responsive, customizable, and mobile-friendly pane on a web app. A fully responsive mostly CSS flexbox based.
Embla Slider is a bone-free carousel library with superb fluid movement and superb scrolling precision. Build cool carousels by expanding Embla Carousel with your CSS and JavaScript.
How to make use of it:
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 within the doc.
<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 fundamental CSS types for the Embla carousel.
.embla { overflow: hidden; } .embla__container .embla__slide position: relative; flex: 0 0 auto; width: 100%;
Available choices to customize the embla carousel.
const embla = EmblaCarousel(document.getElementById('embla'),)
Available API strategies that can be utilized for creating your individual carousel controls.
// will get the container node embla.containerNode() // returns an array of slide nodes embla.slideNodes() // will get the present slide embla.selectedScrollSnap() // returns an array of numbers representing the scroll progress for every snap level embla.scrollSnapList() // will get the earlier slide embla.previousScrollSnap() // checks if has earlier slide embla.canScrollPrevious() // checks if has next slide embla.canScrollNext() // goes to the next slide embla.scrollNext() // goes to the earlier slide embla.scrollPrevious() // goes to a particular slide embla.scrollTo(index: number); // updates options embla.reInit(options: options); // will get the present scroll progress embla.scrollProgress(); // mimics how CSS scroll snap behaves on cell // returns true or false embla.clickAllowed(); // destroys the occasion 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)) embla.on('scroll', function(e){ // on scroll }) embla.on('settle', function(e))
Draggable & Touch-friendly Carousel, draggable slider javascript, Embla Carousel Plugin/Github
See Demo And Download
Official Website(davidcetinkaya): Click Here
This superior jQuery/javascript plugin is developed by davidcetinkaya. For extra Advanced Usages, please go to the official website.
Be First to Comment