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

Category: Javascript , Recommended , Slider | November 13, 2018
Author: NickPiscitelli
Views Total: 127
Official Page: Go to website
Last Update: November 13, 2018
License: MIT

Preview:

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

Description:

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

More 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.

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
});

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/13/2018

  • Change event emitter function name

11/11/2018

  • Fix setOption bug
  • CSS Tweaks

Leave a Reply