Press "Enter" to skip to content

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

Changelog:

v3.0.25 (08/13/2020)

  • Small code enhancements that resulted in smaller bundle measurement.

v3.0.25 (08/11/2020)

  • Remove pointless declarations

v3.0.17 (07/10/2020)

  • Fixed: Type definition file refers to record data that don’t exist within the construct

v2.7.4 (02/13/2020)

  • Fixed Android contact system occasion bug

v2.4.0 (08/31/2019)

  • When utilizing the choice containScroll Embla will robotically merge any extreme snap factors that share the identical snap place

v2.0.0 (06/25/2019)

  • Improved drag accuracy
  • Improved hyperlink dealing with
  • More API strategies added
  • Changed API methodology names
  • Removed groupedIndexes() methodology

v1.0.0 (06/19/2019)

  • groupSlides –> slidesToScroll
  • hasPreviousIndex() –> canScrollPrevious()
  • hasNextIndex() –> canScrollNext()

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *