Glider.js

A fast, lightweight, dependency free, native scrolling carousel alternative! https://nickpiscitelli.github.io/Glid…

 

Glider.js

A fast, light-weight, dependency free, responsive, accessible, extendable, native scrolling list with paging controls, methods and events. (< 2.5kb gzipped!)

Demos and full documentation available on Github Pages: https://nickpiscitelli.github.io/Glider.js/

Quick Start

Include glider.min.css:

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

Include Glider.js:

<script src="glider.min.js"></script>

Example HTML:


<div>
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
  <div> 6 </div>
</div>

Glider.js Initialization

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

Glider.js Initialization w/ full options:

new Glider(document.querySelector('.glider'), {

  // `auto` allows automatic responsive
  // width calculations
  slidesToShow: 'auto',
  slidesToScroll: 'auto',

  // should have been named `itemMinWidth`
  // slides grow to fit the container viewport
  // ignored unless `slidesToShow` is set to `auto`
  itemWidth: undefined,

  // if true, slides wont be resized to fit viewport
  // requires `itemWidth` to be set
  // * this may cause fractional slides
  exactWidth: false,

  // speed aggravator - higher is slower
  duration: .5,

  // dot container element or selector
  dots: 'CSS Selector',

  // arrow container elements or selector
  arrows: {
    prev: 'CSS Selector',
    // may also pass element directly
    next: document.querySelector('CSS Selector')
  },

  // allow mouse dragging
  draggable: false,
  // how much to scroll with each mouse delta
  dragVelocity: 3.3,

  // use any custom easing function
  // compatible with most easing plugins
  easing: function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
  },

  // event control
  scrollPropagate: false,
  eventPropagate: true,

  // 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,

  // Force centering slide after resize event
  resizeLock: true,

  // Glider.js breakpoints are mobile-first
  // be conscious of your ordering
  responsive: [
    {
      breakpoint: 900,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 575,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3
      }
    }
  ]
});

Change options:

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

// optionally call refresh
Glider(document.querySelector(element_path)).refresh();

Bind event:

document.querySelector(element_path).addEventListener('glider-slide-visible', function(event){
  // `this` is bound to the glider element
  // custom data located at `event.detail`
  // access to Glider object via `Glider(this)`
  ...
});

Destroy with:

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

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.