Mobile-friendly Carousel/Scroller In Pure JS – Glider.js

Glider.js is a lightweight but powerful JavaScript plugin to create responsive, accessible, touch-enabled carousels/scrollers for the web.

More features:

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

How to use it:

Download and import the Glider plugin’s files into the document.

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

Insert your own slides into the glider container.

<div class="glider">
  <div> Slide 1 </div>
  <div> Slide 2 </div>
  <div> Slide 3 </div>
  <div> Slide 4 </div>
  <div> Slide 5 </div>
  ...
</div>

Create a new glider with default options.

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

Adds navigation arrows and pagination bullets to the glider.

<div id="dots"></div>
<a class="glider-prev">&laquo;</a>
<a class="glider-next">&raquo;</a>

new Glider(document.querySelector('.glider'),{
    dots: '#dots',
    arrows: {
      prev: '.glider-prev',
      next: '.glider-next'
    }
});

Specify the number of slides to scroll at a time.

new Glider(document.querySelector('.glider'),{
    slidesToScroll: 1
});

Specify the number of slides to show at a time.

new Glider(document.querySelector('.glider'),{
    slidesToShow: 1
});

Set the item width.

new Glider(document.querySelector('.glider'),{
    itemWidth: 150
});

Set the duration of the animation.

new Glider(document.querySelector('.glider'),{
    duration: .5
});

Enable the draggable functionality.

new Glider(document.querySelector('.glider'),{
    // allow mouse dragging
    draggable: false,
    // how much to scroll with each mouse delta
    dragVelocity: 3.3,
});

Enable the scroll lock functionality.

new Glider(document.querySelector('.glider'),{
    // Force centering slide after scroll event
    scrollLock: false,
    // how long to wait after scroll event before locking
    // if too low, it might interrupt normal scrolling
    scrollLockDelay: 150,
});

Customize the easing function.

new Glider(document.querySelector('.glider'),{
    easing: function (x, t, b, c, d) {
      return c*(t/=d)*t + b;
    }
});

Customize the glider when running on different devices:

new Glider(document.querySelector('.glider'),{
    responsive: [{
        breakpoint: 820,
        settings: {
            slidesToScroll: 4,
            slidesToShow: 4,
            dots: false,
            arrows: false
        }
    },
    {
        breakpoint: 800,
        settings: {
            slidesToScroll: 3,
            slidesToShow: 4
        }
    },
    {
        breakpoint: 775,
        settings: {
            slidesToScroll: 3,
            slidesToShow: 3,
            dots: false,
            arrows: false
        }
    },
    {
        breakpoint: 750,
        settings: {
            slidesToScroll: 3,
            slidesToShow: 3
        }
    },{
        breakpoint: 725,
        settings: {
            slidesToScroll: 1,
            slidesToShow: 2,
            dots: false,
            arrows: false
        }
    },
    {
        breakpoint: 700,
        settings: {
            slidesToScroll: 1,
            slidesToShow: 1,
            arrows: false
        }
    }]
});

API methods.

// update options
glider.setOption({
  // options here
});
// refresh the plugin
glider.refresh(true);
// update controls
glider.updateControls
// remove an item
glider.removeItem(2);
// scroll to item 2
glider.scrollTo(2);
// scroll to a specific slide
glider.scrollItem(2);
// destroy the plugin
glider.destroy();

Event handlers available.

document.querySelector('.glider').addEventListener('glider-loaded', function(event){
  // when loaded
});
document.querySelector('.glider').addEventListener('glider-refresh', function(event){
  // when refreshed
});
document.querySelector('.glider').addEventListener('glider-animated', function(event){
  // when animation completed
});
document.querySelector('.glider').addEventListener('glider-add', function(event){
  // after an item added
});
document.querySelector('.glider').addEventListener('glider-remove', function(event){
  // after an item removed
});
document.querySelector('.glider').addEventListener('glider-slide-hidden', function(event){
  // when a slide is hidden
});
document.querySelector('.glider').addEventListener('glider-slide-visible', function(event){
  // when a slide is shown
});
document.querySelector('.glider').addEventListener('glider-destroy', function(event){
  // after destroy
});

Changelog:

11/18/2018

• Full keyboard accessibility

11/15/2018

• Providing option to always set global settings in setOption

11/13/2018

• Change event emitter function name

11/11/2018

• Fix setOption bug
• CSS Tweaks