Fast, Lightweight, Dependency Free, Minimal Carousel with Momentum Scrolling Javascript Plugin

by

Glider.js is a fast, lightweight, responsive, dependency-free scrollable list with customizable paging controls. Glider.js was born out of a frustration for carousels, especially on mobile devices. Inspired by the well-known Slick.js, Glider.js aims to be a fast, lightweight, responsive, unopinionated, dependency-free carousel alternative. Glider.js is not truly a carousel; it lacks the defining carousel feature, infinite looping. Without support for looping, Glider.js retains the ability to use native scrolling creating a natural feel on any touch enabled devices, while still providing the basic carousel aesthetic and functionality (great for desktop!)
javascript-slider
Features:

  • Scrolls through items with momentum scrolling effect.
  • Custom navigation controls.
  • Allows multiple items on the same slide.
  • Supports fractional slides.
  • Allows you to dynamically add/remove items using JS.
  • Easing functions.
  • Useful API.



Libraries

Include glider.min.css and Glider.js

<link href="glider.min.css" rel="stylesheet" type="text/css">
<script src="glider.min.js"></script>

HTML

Insert your own slides into the glider container.

<div class="demo">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
  <div> 6 </div>
</div>

JS

Glider.js Initialization

new Glider(document.querySelector('.demo'));

Glider.js Initialization w/ full options:

new Glider(document.querySelector('.demo'), {
  slidesToShow: 1,
  slidesToScroll: 1,
  duration: .5,
  dots: '.glider-dots',
  arrows: {
    prev: '.glider-prev',
    next: '.glider-next'
  },
 
  
  
  easing: function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
  },
 
  
  scrollPropagate: false,
  eventPropagate: true,
 
  
  
  responsive: [
    {
      breakpoint: 575,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 900,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    }
  ]
});




Change options:

document.querySelector(element_path)._glider.setOption({
  name: value,
  ...
});

Bind event:

document.querySelector(element_path).addEventListener('glider-slide-visible', function(event){
  
  ...
});

Destroy with:

document.querySelector(element_path)._glider.destroy();

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by NickPiscitelli. Visit their official github repository for more information and follow for future updates.


Published by Rohit