Glider.js

A fast, lightweight, dependency free, native scrolling carousel alternative...

Slider
NickPiscitelli/Glider.jsnickpiscitelli.github.io/Glider.js

README

Glider.js


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

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

Quick Start

Include glider.min.css:

  1. ``` html
  2. <link rel="stylesheet" href="glider.min.css">
  3. or
  4. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css">
  5. ```

Include Glider.js:

  1. ``` html
  2. <script src="glider.min.js"></script>
  3. or
  4. <script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>
  5. ```

Example HTML:

  1. ``` html
  2. <div class="glider">
  3.   <div> 1 </div>
  4.   <div> 2 </div>
  5.   <div> 3 </div>
  6.   <div> 4 </div>
  7.   <div> 5 </div>
  8.   <div> 6 </div>
  9. </div>
  10. ```

Glider.js Initialization

  1. ``` js
  2. new Glider(document.querySelector('.glider'));
  3. ```

Glider.js Initialization w/ full options:

  1. ``` js
  2. new Glider(document.querySelector('.glider'), {

  4.   // `auto` allows automatic responsive
  5.   // width calculations
  6.   slidesToShow: 'auto',
  7.   slidesToScroll: 'auto',

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

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

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

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

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

  32.   // allow mouse dragging
  33.   draggable: false,
  34.   // how much to scroll with each mouse delta
  35.   dragVelocity: 3.3,

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

  43.   // event control
  44.   scrollPropagate: false,
  45.   eventPropagate: true,

  47.   // Force centering slide after scroll event
  48.   scrollLock: false,
  49.   // how long to wait after scroll event before locking
  50.   // if too low, it might interrupt normal scrolling
  51.   scrollLockDelay: 150,

  53.   // Force centering slide after resize event
  54.   resizeLock: true,

  56.   // Glider.js breakpoints are mobile-first
  57.   responsive: [
  58.     {
  59.       breakpoint: 900,
  60.       settings: {
  61.         slidesToShow: 2,
  62.         slidesToScroll: 2
  63.       }
  64.     },
  65.     {
  66.       breakpoint: 575,
  67.       settings: {
  68.         slidesToShow: 3,
  69.         slidesToScroll: 3
  70.       }
  71.     }
  72.   ]
  73. });
  74. ```

Change options:

  1. ``` js
  2. Glider(document.querySelector(element_path)).setOption({
  3.   name: value,
  4.   ...
  5. });

  7. // optionally call refresh
  8. Glider(document.querySelector(element_path)).refresh();
  9. ```

Bind event:

  1. ``` js
  2. document.querySelector(element_path).addEventListener('glider-slide-visible', function(event){
  3.   // `this` is bound to the glider element
  4.   // custom data located at `event.detail`
  5.   // access to Glider object via `Glider(this)`
  6.   ...
  7. });
  8. ```

Destroy with:

  1. ``` js
  2. Glider(document.querySelector(element_path)).destroy();
  3. ```

Install using package managers NPM / YARN


  1. ```
  2. $ npm install glider-js
  3. ```

  1. ```
  2. $ yarn add glider-js
  3. ```

Browser support


Glider.js should run on all modern browsers. Support for older browser can be achieved by polyfilling document.classList, window.requestAnimationFrame, Object.assign and CustomEvent

Include glider-compat.min.js to load the aforementioned polyfills

Native Scrollbars


Most browsers now support the scrollbar-width property allowing us to avoid the messy hack below.

NOTE: This feature is marked as experimental and may not work in all browsers.

  1. ```
  2. .glider-track {
  3.   scrollbar-width: none;
  4. }
  5. ```

Since Glider.js uses native scrolling, the browser wants to apply the standard scrollbar to the glider. In most cases, this is fine since the scrollbar can be hidden with CSS and Glider.js does so when appropriate. In browsers such as Firefox though, the scrollbars cannot be hidden with CSS and require additional markup to hide.

To hide the scrollbars in Firefox, you'll want to wrap your glider with `
` and apply the following CSS/JS:

  1. ```css
  2. @-moz-document url-prefix() {
  3.   .glider-track {
  4.     margin-bottom: 17px;
  5.   }
  6.   .glider-wrap {
  7.     overflow: hidden;
  8.   }
  9. }
  10. ```

  1. ``` js
  2. document.addEventListener('glider-loaded', hideFFScrollBars);
  3. document.addEventListener('glider-refresh', hideFFScrollBars);
  4. function hideFFScrollBars(e){
  5.   var scrollbarHeight = 17; // Currently 17, may change with updates
  6.   if(/firefox/i.test(navigator.userAgent)){
  7.     // We only need to appy to desktop. Firefox for mobile uses
  8.     // a different rendering engine (WebKit)
  9.     if (window.innerWidth > 575){
  10.       e.target.parentNode.style.height = (e.target.offsetHeight - scrollbarHeight) + 'px'
  11.     }
  12.   }
  13. }
  14. ```

Packages using Glider.js :rocket:


- react-glider - A react wrapper for Glider.js written in typescript.

Dependencies


None :)

License


Copyright (c) 2018 Nick Piscitelli

Licensed under the MIT license.

It's all yours.