Draggable & Touch-friendly Carousel In Vanilla JavaScript – embla-carousel

Category: Javascript , Recommended , Slider | July 16, 2019
Author: davidcetinkaya
Views Total: 270
Official Page: Go to website
Last Update: July 16, 2019
License: MIT

Preview:

Draggable & Touch-friendly Carousel In Vanilla JavaScript – embla-carousel

Description:

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.

How to use 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 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', 'end'
      align: 'center',

      // parent container
      container: '*',

      // 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 which 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()

// gets an array of all scroll snap points,
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.changeOptions(options: options)

// 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('dragStart', function(e){
  // on dragStart
})

embla.on('dragEnd', function(e){
  // on dragEnd
})

embla.on('click', function(e){
  // on click
})

embla.on('scroll', function(e){
  // on click
})

Changelog:

v2.3.0 (07/16/2019)

  • Added ‘scroll’ event.

v2.2.0 (07/11/2019)

  • Added on click API Method

v2.1.14 (07/11/2019)

  • Fixed canScrollNext & canScrollPrev bug

v2.1.13 (07/10/2019)

  • Updated

v2.1.10 (07/06/2019)

  • New containScroll options

v2.0.3 (07/04/2019)

  • Solved the Webpack 4 UMD module window issue.

v2.0.0 (06/25/2019)

  • Improved drag accuracy
  • Improved link handling
  • More API methods added
  • Changed API method names
  • Removed groupedIndexes() method

v1.0.0 (06/19/2019)

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

v0.9.0 (06/16/2019)

  • Added more API.

v0.8.0 (06/13/2019)

  • Add: closeOnScroll option to close pickr if the user scrolls the area behind it. Useful on nested scrollable elements.
  • Change: Make pickr’s position absolute to prevent sticking at the top.
  • Change: Make swatches not-centered

v0.7.2 (06/08/2019)

  • Drag threshold has been lowered. Less drag force is now required for a slide change to occur.

You Might Be Interested In:


Leave a Reply