Simple Pure Javascript Drag Controller Slider | Embla Carousel

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