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 install embla-carousel --save

Import the Embla-carousel.

import EmblaCarousel from 'embla-carousel'

Or load the compiled JavaScript within the doc.

<script src=""></script>

Add slides to the Embla carousel.

<div class="embla" id="embla">
  <div class="embla__container">
    <div class="embla__slide">
      Slide 1
    <div class="embla__slide">
      Slide 2
    <div class="embla__slide">
      Slide 3

Initialize the Embla carousel.

const embla = EmblaCarousel(document.getElementById('embla'))

The fundamental CSS types for the Embla carousel.

.embla {
  overflow: hidden;


  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

// returns an array of slide nodes

// will get the present slide

// returns an array of numbers representing the scroll progress for every snap level

// will get the earlier slide

// checks if has earlier slide

// checks if has next slide

// goes to the next slide

// goes to the earlier slide

// goes to a particular slide
embla.scrollTo(index: number);

// updates options
embla.reInit(options: options);

// will get the present scroll progress

// mimics how CSS scroll snap behaves on cell
// returns true or false

// destroys the occasion

Event handlers.

// embla.on(event, callback)
//, 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.

Leave a Comment