<!DOCTYPE HTML>
<html>
<head>
<!--
_____ __ _ __ _
/ ___// /(_)___/ /___ ____ (_)___
/ (_ // // // _ // -_)/ __/_ / /(_-<
\___//_//_/ \_,_/ \__//_/ (_)__/ //___/
|___/
Version: 1.5
Author: Nick Piscitelli (pickykneee)
Website: https://nickpiscitelli.com
License: MIT License
Release Date: October 25th, 2018
-->
<title>Glider.js - A fast, lightweight carousel alternative</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<link rel="canonical" href="https://nickpiscitelli.github.io/Glider.js/" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/prism.css" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="canonical" href="https://nickpiscitelli.github.io/Glider.js" />
<noscript>
<link rel="stylesheet" href="assets/css/noscript.css" />
</noscript>
<script src="assets/js/glider-compat.min.js"></script>
<script src="assets/js/glider.min.js"></script>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header" class="alt">
<span class="logo"><img src="images/logo.svg" alt="" /></span>
<h1>Glider.js</h1>
<p>
A blazingly fast, crazy small, fully responsive, mobile-friendly, dependency free,
native scrolling list with paging controls!
</p>
<p>
<a href="https://github.com/NickPiscitelli/Glider.js" class="button github">
<img class="octo" src="images/octo.png" > <span class="mobileHide">View</span> Github
</a>
<a onclick="ga('send','event','Download Button');" href="https://github.com/NickPiscitelli/Glider.js/archive/master.zip" class="button">
Download <span class="mobileHide">Now</span>
<i class="zip fas fa-download dl-icon"></i>
</a>
</p>
</header>
<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="#intro" class="active">Introduction</a></li>
<li><a href="#demos">Demos</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
<!-- Main -->
<div id="main">
<!-- Introduction -->
<section id="intro" class="main">
<div class="spotlight">
<div class="content">
<header class="major">
<h2>What is Glider.js?</h2>
</header>
<p>
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!)
</p>
<p>
<a href="#demos" class="smooth-scroll">Check out the demos below!</a>
</p>
<header class="major">
<h2>Features</h2>
</header>
<ul class="script-features">
<li><i class="fas fa-check"></i>Insanely Small (< 2.8kb gzipped!)</li>
<li><i class="fas fa-check"></i>Ridiculously Fast (as low as 25ms initialization!)</li>
<li><i class="fas fa-check"></i>Vanilla JS - No Dependencies (look Mom, no jQuery!)</li>
<li><i class="fas fa-check"></i>Native Browser Scroll (momentum scrolling!)</li>
<li><i class="fas fa-check"></i>Fully Responsive (breakpoint based settings)</li>
<li><i class="fas fa-check"></i>Customizable Arrow and Dot Navigation</li>
<li><i class="fas fa-check"></i>Full Keyboard Accessibility + ARIA Labeling</li>
<li><i class="fas fa-check"></i>Mouse Dragging Support!</li>
<li><i class="fas fa-check"></i>Flexbox Support (enabled by default)</li>
<li><i class="fas fa-check"></i>Easily Extendable</li>
<li><i class="fas fa-check"></i>Custom Events</li>
<li><i class="fas fa-check"></i>and much more!</li>
</ul>
</div>
</div>
</section>
<!-- First Section -->
<section id="demos" class="main special">
<header class="major">
<h2>Demos</h2>
</header>
<div class="demo first">
<h2>Multiple Items</h2>
<div data-name="Multiple Item" class="glider-contain multiple">
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="glider" id="glider-double">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
<div><h1>4</h1></div>
<div><h1>5</h1></div>
<div><h1>6</h1></div>
<div><h1>7</h1></div>
<div><h1>8</h1></div>
<div><h1>9</h1></div>
<div><h1>10</h1></div>
<div><h1>11</h1></div>
<div><h1>12</h1></div>
<div><h1>13</h1></div>
<div><h1>14</h1></div>
<div><h1>15</h1></div>
<div><h1>16</h1></div>
<div><h1>17</h1></div>
<div><h1>18</h1></div>
</div>
</div>
</div>
<button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-2"><i class="fa fa-chevron-left"></i></i></button>
<button role="button" aria-label="Next" class="glider-next" id="glider-next-2"><i class="fa fa-chevron-right"></i></i></button>
<div id="dots2"></div>
</div>
<script>
window.addEventListener('load', function () {
window.glides = new Glider(document.getElementById('glider-double'), {
slidesToShow: 5,
slidesToScroll: 5,
draggable: true,
dots: '#dots2',
arrows: {
prev: '#glider-prev-2',
next: '#glider-next-2'
}
})
});
</script>
<pre class="line-numbers language-javascript">
<code class="line-numbers language-javascript">
new Glider(document.querySelector('.glider'), {
slidesToShow: 5,
slidesToScroll: 5,
draggable: true,
dots: '.dots',
arrows: {
prev: '.glider-prev',
next: '.glider-next'
}
});
</code>
</pre>
</div>
<div class="demo">
<h2>Single Item</h2>
<div data-name="Single Item" class="glider-contain">
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="glider" id="glider-single">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
<div><h1>4</h1></div>
<div><h1>5</h1></div>
<div><h1>6</h1></div>
<div><h1>7</h1></div>
<div><h1>8</h1></div>
<div><h1>9</h1></div>
<div><h1>10</h1></div>
</div>
</div>
</div>
<button role="button" aria-label="Previous" class="glider-prev" id="glider-prev"><i class="fa fa-chevron-left"></i></i></button>
<button role="button" aria-label="Next" class="glider-next" id="glider-next"><i class="fa fa-chevron-right"></i></i></button>
<div id="dots"></div>
</div>
<script>
window.addEventListener('load', function(){
new Glider(document.getElementById('glider-single'), {
slidesToShow: 1,
dots: '#dots',
draggable: true,
arrows: {
prev: '#glider-prev',
next: '#glider-next'
},
easing: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
}
});
});
</script>
<pre class="line-numbers language-javascript">
<code class="line-numbers language-javascript">
new Glider(document.querySelector('.glider'), {
slidesToShow: 1,
dots: '#dots',
draggable: true,
arrows: {
prev: '.glider-prev',
next: '.glider-next'
}
});
</code>
</pre>
</div>
<div class="demo persp">
<h2>Perspective View<span class="aside">(themeable CSS)</span></h2>
<div data-name="Perspective View" class="glider-contain multiple">
<div class="glider glider-persp" id="glider-persp">
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>1</h1></div></div></div>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>2</h1></div></div></div>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>3</h1></div></div></div>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>4</h1></div></div></div>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>5</h1></div></div></div>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>6</h1></div></div></div>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>7</h1></div></div></div>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>8</h1></div></div></div>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>9</h1></div></div></div>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>10</h1></div></div></div>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>11</h1></div></div></div>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>12</h1></div></div></div>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>13</h1></div></div></div>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>14</h1></div></div></div>
<div><div class="gradient-border-bottom"><div class="gradient-border"><h1>15</h1></div></div></div>
</div>
<button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-per"><i class="fa fa-chevron-left"></i></i></button>
<button role="button" aria-label="Next" class="glider-next" id="glider-next-per"><i class="fa fa-chevron-right"></i></i></button>
<div id="dots-per"></div>
</div>
<script>
window.addEventListener('load', function () {
window.glides = new Glider(document.getElementById('glider-persp'), {
slidesToShow: 5,
slidesToScroll: 1,
draggable: true,
dots: '#dots-per',
arrows: {
prev: '#glider-prev-per',
next: '#glider-next-per'
}
})
});
</script>
<pre class="line-numbers language-javascript">
<code class="line-numbers language-javascript">
new Glider(document.querySelector('.glider'), {
slidesToShow: 5,
slidesToScroll: 1,
draggable: true,
dots: '.dots',
arrows: {
prev: '.glider-prev',
next: '.glider-next'
}
});
</code>
</pre>
<span class="aside">* Custom CSS Required</span>
</div>
<div class="demo">
<h2>Responsive Settings / Scroll Lock Support</h2>
<div data-name="Responsive Settings" class="glider-contain multiple">
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="glider" id="glider-resp">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
<div><h1>4</h1></div>
<div><h1>5</h1></div>
<div><h1>6</h1></div>
<div><h1>7</h1></div>
<div><h1>8</h1></div>
<div><h1>9</h1></div>
<div><h1>10</h1></div>
</div>
</div>
</div>
<button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-resp"><i class="fa fa-chevron-left"></i></i></button>
<button role="button" aria-label="Next" class="glider-next" id="glider-next-resp"><i class="fa fa-chevron-right"></i></i></button>
<div id="resp-dots"></div>
</div>
<script>
window.addEventListener('load',function(){
new Glider(document.querySelector('#glider-resp'), {
// Mobile-first defaults
slidesToShow: 1,
slidesToScroll: 1,
scrollLock: true,
dots: '#resp-dots',
arrows: {
prev: '#glider-prev-resp',
next: '#glider-next-resp'
},
responsive: [
{
breakpoint: 775,
settings: {
slidesToShow: 'auto',
slidesToScroll: 'auto',
itemWidth: 150,
duration: 0.25
}
},{
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
itemWidth: 150,
duration: 0.25
}
}
]
})
});
</script>
<pre class="line-numbers language-javascript">
<code class="line-numbers language-javascript">
new Glider(document.querySelector('.glider'), {
// Mobile-first defaults
slidesToShow: 1,
slidesToScroll: 1,
scrollLock: true,
dots: '#resp-dots',
arrows: {
prev: '.glider-prev',
next: '.glider-next'
},
responsive: [
{
// screens greater than >= 775px
breakpoint: 775,
settings: {
// Set to `auto` and provide item width to adjust to viewport
slidesToShow: 'auto',
slidesToScroll: 'auto',
itemWidth: 150,
duration: 0.25
}
},{
// screens greater than >= 1024px
breakpoint: 1024,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
itemWidth: 150,
duration: 0.25
}
}
]
});
</code>
</pre>
</div>
<div class="demo">
<h2>Fractional Slides</h2>
<div data-name="Fractional Slides" class="glider-contain multiple">
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="glider" id="glider-cut">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
<div><h1>4</h1></div>
<div><h1>5</h1></div>
<div><h1>6</h1></div>
<div><h1>7</h1></div>
<div><h1>8</h1></div>
<div><h1>9</h1></div>
<div><h1>10</h1></div>
<div><h1>11</h1></div>
<div><h1>12</h1></div>
<div><h1>13</h1></div>
<div><h1>14</h1></div>
<div><h1>15</h1></div>
<div><h1>16</h1></div>
<div><h1>17</h1></div>
<div><h1>18</h1></div>
<div><h1>19</h1></div>
<div><h1>20</h1></div>
<div><h1>21</h1></div>
<div><h1>22</h1></div>
<div><h1>23</h1></div>
<div><h1>24</h1></div>
</div>
</div>
</div>
<button role="button" aria-label="Previous" class="glider-prev" id="cut-prev"><i class="fa fa-chevron-left"></i></i></button>
<button role="button" aria-label="Next" class="glider-next" id="cut-next"><i class="fa fa-chevron-right"></i></i></button>
<div role="tablist" id="frac-dots"></div>
</div>
<script>
window.addEventListener('load',function(){
var glider = new Glider(document.getElementById('glider-cut'), {
slidesToScroll: 1,
slidesToShow: 5.5,
draggable: true,
dots: '#frac-dots',
arrows: {
prev: '#cut-prev',
next: '#cut-next'
}
});
})
</script>
<pre class="line-numbers language-javascript">
<code class="line-numbers language-javascript">
new Glider(document.querySelector('.glider'), {
slidesToScroll: 1,
slidesToShow: 5.5,
draggable: true,
dots: '.dots',
arrows: {
prev: '.glider-prev',
next: '.glider-next'
}
});
</code>
</pre>
</div>
<div class="demo">
<div id="add"><h1></h1></div>
<h2>Add/Remove Items</h2>
<div data-name="Add/Remove Items" class="glider-contain multiple">
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="glider" id="glider-add">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
<div><h1>4</h1></div>
<div><h1>5</h1></div>
<div><h1>6</h1></div>
<div><h1>7</h1></div>
<div><h1>8</h1></div>
<div><h1>9</h1></div>
</div>
</div>
</div>
<button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-add"><i class="fa fa-chevron-left"></i></i></button>
<button role="button" aria-label="Next" class="glider-next" id="glider-next-add"><i class="fa fa-chevron-right"></i></i></button>
<div id="add-dots"></div>
</div>
<p class="buttons">
<a class="button" id="addSlide">Add</a>
<a class="button" id="removeSlide">Remove</a>
</p>
<script>
window.addEventListener('load',function(){
var glider = new Glider(document.getElementById('glider-add'), {
slidesToShow: 3,
duration: .6,
dots: '#add-dots',
arrows: {
prev: '#glider-prev-add',
next: '#glider-next-add'
}
});
document.getElementById('addSlide').addEventListener('click',function(){
var ele = document.getElementById('add').cloneNode(true);
ele.id = '';
ele.querySelector('h1').textContent = glider.slides.length + 1;
glider.addItem(ele);
try{
ga('send','event','Add/Remove Item', 'Add')
} catch(ex){}
});
document.getElementById('removeSlide').addEventListener('click',function(){
glider.removeItem(glider.slides.length - 1);
try{
ga('send','event','Add/Remove Item', 'Remove')
} catch(ex){}
});
})
</script>
<pre class="line-numbers language-javascript">
<code class="line-numbers language-javascript">
new Glider(document.querySelector('.glider'), {
slidesToShow: 3,
dots: '#dots',
arrows: {
prev: '.glider-prev',
next: '.glider-next'
}
});
</code>
</pre>
</div>
<!--
<div class="demo">
<div id="add"><h1></h1></div>
<h2>Demo with Content</h2>
<div class="glider-contain content">
<div class="glider" id="glider-content">
<div>
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="article">
<img src="http://placehold.it/150/C9E1F5/FFFFFF?text=$_">
<h4 class="cool-border">Awesome JS</h4>
<p>Wow! Can you believe that Glider.js is only 1.7kb gzipped?! That's pretty small!</p>
<a class="read-more">Read More</a>
</div>
</div>
</div>
</div>
<div>
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="article">
<img src="http://placehold.it/150/C9E1F5/FFFFFF?text=>_">
<h4 class="cool-border short">JS Weekly</h4>
<p>New library Glider.js has absolutely no dependencies! jQuery? What's that?</p>
<a class="read-more">Read More</a>
</div>
</div>
</div>
</div>
<div>
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="article">
<img src="http://placehold.it/150/C9E1F5/FFFFFF?text=0x">
<h4 class="cool-border long">Readers MD5 Digest</h4>
<p>Glider.js - Wow. Just wow. A must have for any product upsell or content list!</p>
<a class="read-more">Read More</a>
</div>
</div>
</div>
</div>
<div>
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="article">
<img src="http://placehold.it/150/C9E1F5/FFFFFF?text=$_">
<h4 class="cool-border">Awesome JS</h4>
<p>Did you really think they would be different than the previous?</p>
<a class="read-more">Read More</a>
</div>
</div>
</div>
</div>
<div>
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="article">
<img src="http://placehold.it/150/C9E1F5/FFFFFF?text=>_">
<h4 class="cool-border short">JS Weekly</h4>
<p>I'm a programmer, not a writer. Don't expect so much.</p>
<a class="read-more">Read More</a>
</div>
</div>
</div>
</div>
<div>
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="article">
<img src="http://placehold.it/150/C9E1F5/FFFFFF?text=0x">
<h4 class="cool-border long">Readers SHA1 Digest</h4>
<p>Well, at least there was an issue upgrade.</p>
<a class="read-more">Read More</a>
</div>
</div>
</div>
</div>
<div>
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="article">
<img src="http://placehold.it/150/C9E1F5/FFFFFF?text=$_">
<h4 class="cool-border">Awesome JS</h4>
<p>Ok, now you're getting greedy.</p>
<a class="read-more">Read More</a>
</div>
</div>
</div>
</div>
<div>
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="article">
<img src="http://placehold.it/150/C9E1F5/FFFFFF?text=>_">
<h4 class="cool-border short">JS Weekly</h4>
<p>How much content do you think I can produce?</p>
<a class="read-more">Read More</a>
</div>
</div>
</div>
</div>
<div>
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="article">
<img src="http://placehold.it/150/C9E1F5/FFFFFF?text=0x">
<h4 class="cool-border long">Readers SHA256 Digest</h4>
<p>I should have disabled the dots for optimal suspense.</p>
<a class="read-more">Read More</a>
</div>
</div>
</div>
</div>
<div>
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="article">
<img src="http://placehold.it/150/C9E1F5/FFFFFF?text=$_">
<h4 class="cool-border">Awesome JS</h4>
<p>You would have just ended up looking at the arrows anyway.</p>
<a class="read-more">Read More</a>
</div>
</div>
</div>
</div>
<div>
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="article">
<img src="http://placehold.it/150/C9E1F5/FFFFFF?text=>_">
<h4 class="cool-border short">JS Weekly</h4>
<p>At least you know it's almost over soon.</p>
<a class="read-more">Read More</a>
</div>
</div>
</div>
</div>
<div>
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="article">
<img src="http://placehold.it/150/C9E1F5/FFFFFF?text=0x">
<h4 class="cool-border long">Readers SHA512 Digest</h4>
<p>
2b38627595da6be<br>
Nice hash.
</p>
<a class="read-more">Read More</a>
</div>
</div>
</div>
</div>
<div>
<div class="gradient-border-bottom">
<div class="gradient-border">
<div class="article">
<img src="http://placehold.it/150/C9E1F5/FFFFFF?text=$_">
<h4 class="cool-border">Awesome JS</h4>
<p>I hope you expected more.</p>
<a class="read-more">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div id="dots-content"></div>
<button role="button" aria-label="Previous" class="glider-prev" id="glider-prev-content"><i class="fa fa-chevron-left"></i></i></button>
<button role="button" aria-label="Next" class="glider-next" id="glider-next-content"><i class="fa fa-chevron-right"></i></i></button>
</div>
<script>
new Glider(document.getElementById('glider-content'), {
slidesToShow: 1,
slidesToScroll: 1,
duration: .75,
easing: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
dots: '#dots-content',
arrows: {
prev: '#glider-prev-content',
next: '#glider-next-content'
},
responsive: [{
breakpoint: 900,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},{
breakpoint: 575,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
}]
});
</script>
<pre class="line-numbers language-javascript">
<code class="line-numbers language-javascript">
new Glider(document.querySelector('.glider'), {
slidesToShow: 1,
slidesToScroll: 1,
duration: .75,
// easeInQuad
easing: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
arrows: {
prev: '.glider-prev',
next: '.glider-next'
},
dots: '#dots',
responsive: [{
breakpoint: 900,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},{
breakpoint: 575,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
}
}]
});
</code>
</pre>
</div>
</section>
-->
<!-- Second Section -->
<section id="usage" class="main code special">
<header class="major">
<h2>Getting Started</h2>
</header>
<p>
The following minimal HTML structure is required:
</p>
<pre class="line-numbers language-html">
<code class="line-numbers language-html">
<div class="any-class">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</code>
</pre>
<p>
A more comprehensive example with all paging controls would
look something like this:
</p>
<pre class="line-numbers language-html">
<code class="line-numbers language-html">
<div class="glider-contain">
<div class="glider">
<div>your content here</div>
<div>your content here</div>
<div>your content here</div>
<div>your content here</div>
</div>
<button aria-label="Previous" class="glider-prev">«</button>
<button aria-label="Next" class="glider-next">»</button>
<div role="tablist" class="dots"></div>
</div>
</code>
</pre>
<p>
Include Glider.js in your document before the </body> tag:
</p>
<pre class="line-numbers language-html">
<code class="line-numbers language-html">
<script src="glider.js"></script>
</code>
</pre>
<p>
Include the required CSS in your <head> tag
</p>
<pre class="line-numbers language-html">
<code class="line-numbers language-html">
<link rel="stylesheet" type="text/css" href="glider.css">
</code>
</pre>
<p>
Initialize Glider.js inline or via your script files
</p>
<pre class="line-numbers language-javascript">
<code class="line-numbers language-javascript">
window.addEventListener('load', function(){
new Glider(document.querySelector('.glider'), {
setting-name: setting-value
})
})
</code>
</pre>
<p>
That's it! You're done!
</p>
</section>
<!-- Get Started -->
<section id="settings" class="main special">
<header class="major">
<h2>Settings</h2>
</header>
<ul class="settings">
<li>
<span class="setting-name">slidesToShow</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a><br>
<span class="type default">Default:</span> 1<br>
The number of slides to show in container<br>
If this value is set to <code class="slim slimmer">auto</code>, it will be automatically calculated based upon the number
of items able to fit within the container viewport. This requires setting the <code class="slim slimmer">itemWidth</code> option.
</li>
<li>
<span class="setting-name">slidesToScroll</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a><br>
<span class="type default">Default:</span> 1<br>
The number of slides to scroll when <b>arrow</b> navigation is used<br>
If this value is set to <code class="slim slimmer">auto</code>, it will match the value of <code class="slim slimmer">slidesToShow</code>.
</li>
<li>
<span class="setting-name">arrows</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a><br>
<span class="type default">Default:</span> undefined<br>
An object containing the prev/next arrow settings<br>
<span class="indent">
<span class="type">Keys:</span> prev | next<br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a> (HTML Selector)<br>
</span>
</li>
<li>
<span class="setting-name">dots</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a> (HTML Selector)<br>
<span class="type default">Default:</span> undefined<br>
An HTML element or selector containing the dot container<br>
</li>
<li>
<span class="setting-name">itemWidth</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a><br>
<span class="type default">Default:</span> undefined<br>
This value is ignored unless <code class="slim slimmer">slidesToShow</code> is set to <code class="slim slimmer">auto</code>, in which it is then required.
</li>
<li>
<span class="setting-name">exactWidth</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
<span class="type default">Default:</span> undefined<br>
This prevents resizing items to fit when <code class="slim slimmer">slidesToShow</code> is set to auto.
<span class="aside">NOTE: This will yield fractional slides if your container is not sized appropriately</span>
</li>
<li>
<span class="setting-name">scrollLock</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
<span class="type default">Default:</span> false<br>
If true, Glider.js will scroll to the nearest slide after any scroll interactions
</li>
<li>
<span class="setting-name">scrollLockDelay</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a><br>
<span class="type default">Default:</span> 250<br>
When <code class="slim slimmer">scrollLock</code> is set, this is the delay in milliseconds to wait before the scroll happens
</li>
<li>
<span class="setting-name">resizeLock</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
<span class="type default">Default:</span> true<br>
If true, Glider.js will lock to the nearest slide on resizing of the window
</li>
<li>
<span class="setting-name">responsive</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a> of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Objects</a> [{}]<br>
<span class="type default">Default:</span> undefined<br>
An object containing custom settings per provided breakpoint. See demo for details.
<span class="aside">NOTE: All responsive calculation are provided "mobile-first".</span>
</li>
<li>
<span class="setting-name">rewind</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
<span class="type default">Default:</span> false<br>
If true, Glider.js will scroll to the beginning/end when its respective endpoint is reached
</li>
<li>
<span class="setting-name">scrollPropagate</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
<span class="type default">Default:</span> false<br>
Whether or not to release the scroll events from the container
</li>
<li>
<span class="setting-name">draggable</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
<span class="type default">Default:</span> false<br>
If true, the list can be scrolled by click and dragging with the mouse
</li>
<li>
<span class="setting-name">dragVelocity</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a><br>
<span class="type default">Default:</span> 3.3<br>
How much to aggravate the velocity of the mouse dragging
</li>
<li>
<span class="setting-name">duration</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a><br>
<span class="type default">Default:</span> 0.5<br>
An aggravator used to control animation speed. <br>Higher is slower!<br>
</li>
<li>
<span class="setting-name">eventPropagate</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
<span class="type default">Default:</span> true<br>
Whether or not Glider.js events should bubble (useful for binding events to all carousels)
</li>
<li>
<span class="setting-name">skipTrack</span><br>
<span class="type">Type:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
<span class="type default">Default:</span> false<br>
Whether or not Glider.js should skip wrapping its children with a 'glider-track' <div>.
<span class="aside">NOTE: If true, Glider.js will assume that the 'glider-track' element has been added manually. All slides must be children of the track element.</span>
</li>
</ul>
</section>
<section id="events" class="main special">
<header class="major">
<h2>Events</h2>
<p>
A list of custom events provided by Glider.js. Due to the unobtrusive nature of Glider.js, all standard events (scroll, click, etc) can be bound to their elements as normal.
</p>
</header>
<ul class="settings">
<li>
<span class="setting-name">glider-loaded</span><br>
Called after Glider.js is first initialized<br>
</li>
<li>
<span class="setting-name">glider-refresh</span><br>
Called whenever Glider.js refreshes its elements or settings<br>
</li>
<li>
<span class="setting-name">glider-animated</span><br>
Called whenever a Glider.js paging animation is complete
</li>
<li>
<span class="setting-name">glider-add</span><br>
Called whenever an item is added to Glider.js
</li>
<li>
<span class="setting-name">glider-remove</span><br>
Called whenever an item is removed from Glider.js
</li>
<li>
<span class="setting-name">glider-destroy</span><br>
Called whenever a Glider.js is destroyed
</li>
<li>
<span class="setting-name">glider-slide-visible</span><br>
Called whenever a slide is shown. Passed an object containing the slide index
</li>
<li>
<span class="setting-name">glider-slide-hidden</span><br>
Called whenever a slide is hidden. Passed an object containing the slide index
</li>
</ul>
<p class="little-margin"><b>Event Example - Lazy Loading Images</b></p>
<p>
A reference to the Glider.js object can be retrieved by re-calling Glider.js with the glider elements
as its sole argument: <code class="slim">var glider = Glider(document.querySelector('.glider'));</code>. Any custom
event data is passed via the event, located at <code class="slim">event.detail</code>
</p>
<pre class="wide language-javascript">
<code class="language-javascript">
// example event hook implementing basic lazy loading images
// appropriate image CSS (opacity/transform) must be set to work
// the images should have a data-src attribute that contains the image to load
document.querySelector('.glider').addEventListener('glider-slide-visible', function(event){
var imgs_to_anticipate = 3;
var glider = Glider(this);
for (var i = 0; i <= imgs_to_anticipate; ++i){
var index = Math.min(event.detail.slide + i, glider.slides.length - 1),
glider = glider;
loadImages.call(glider.slides[index],function(){
glider.refresh(true);
})
}
});
function loadImages(callback){
[].forEach.call(this.querySelectorAll('img'),function(img){
var _img = new Image, _src = img.getAttribute('data-src');
_img.onload = function(){
img.src = _src;
img.classList.add('loaded');
callback && callback(img);
}
if(img.src !== _src) _img.src = _src;
});
}
</code>
</pre>
<p>
<a data-collapse="css-collapse" class="collapse-control" href="#">Click to show lazy loading CSS</a>
</p>
<div id="css-collapse" class="collapse">
<pre class="language-css">
<code class="language-css">
// example css
.glider-slide img {
opacity: 0;
transition: opacity .1s ease;
}
.glider-slide img.loaded {
opacity: 1;
}
</code>
</pre>
</div>
</section>
<section id="methods" class="main special">
<header class="major">
<h2>Methods</h2>
<p>Methods are called directly on the Glider object returned from initialization.</p>
<p class="little-margin"><b>Examples:</b></p>
<pre class="language-javascript">
<code class="language-javascript">
var glider = new Glider(document.getElementById('glider'), {
slidesToShow: 1,
dots: '#dots',
});
glider.setOption({
arrows: {
prev: '#glider-prev',
next: '#glider-next'
}
});
// a refresh may need to be called depending
// upon the options passed to setOptions
glider.refresh(true);
// adding or removing items automatically calls refresh()
glider.removeItem(4);
// death to smoochy!
glider.destroy();
</code>
</pre>
</header>
<ul class="settings">
<li>
<span class="setting-name">addItem(<span class="arguments">element</span>)</span><br>
<span class="type">Arguments:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a><br>
Add an item to the list<br>
</li>
<li>
<span class="setting-name">removeItem(<span class="arguments">itemIndex</span>)</span><br>
<span class="type">Arguments:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a><br>
Remove an item from the list<br>
<span class="aside">NOTE: Slide position starts at 0, not 1!</span>
</li>
<li>
<span class="setting-name">setOption(<span class="arguments">arguments, global</span>)</span><br>
<span class="type">Arguments:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> <br>
Overrides options set during initialization. If called when a breakpoint is active, the settings
for the active breakpoint are updated.<br>
If second argument is true, the global settings are updated regardless of active breakpoint.<br>
Required for overriding <code class="slim">responsive</code> setting itself
</li>
<li>
<span class="setting-name">scrollItem(<span class="arguments">slideIndex, isActuallyDotIndex</span>)</span><br>
<span class="type">Arguments:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a><br>
Scroll to any slide or page. If second argument is explicitly true, then the first argument will refer to the page to scroll to, as opposed to the slide.<br>
</li>
<li>
<span class="setting-name">scrollTo(<span class="arguments">pixelOffset</span>)</span><br>
<span class="type">Arguments:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a> <br>
Scroll directly to supplied scroll position in pixels<br>
</li>
<li>
<span class="setting-name">refresh(<span class="arguments">rebuildPaging</span>)</span><br>
<span class="type">Arguments:</span> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a> <br>
Force a refresh of Glider.js. If rebuildPaging is true, paging controls will force a rebuild as well. This
argument must be true if any options affecting paging controls (dots/arrows) are modified.
</li>
<li>
<span class="setting-name">updateControls(<span class="arguments"></span>)</span><br>
<span class="type">Arguments:</span> None <br>
Force a refresh of Glider.js navigation controls
</li>
<li>
<span class="setting-name">destroy(<span class="arguments"></span>)</span><br>
Destroy Glider.js.
<span class="aside">NOTE: Since Glider.js does not create the arrows or dot container, it leaves them untouched.
You may hide them yourself via CSS in the destroy event.</span>
</li>
</ul>
</section>
<section id="faq" class="main code special">
<header class="major">
<h2>FAQ</h2>
</header>
<ul class="questions">
<li>
<p class="question">
What is Glider.js?
</p>
<p class="answer">
Glider.js is a fast, lightweight, responsive, dependency-free scrollable list with customizable paging controls.
</p>
</li>
<li>
<p class="question">
What isn't Glider.js?
</p>
<p class="answer">
Glider.js is not a drop-in replacement for carousels. It lacks a lot of
functionality provided by Slick.js or other featured carousels. An non-exhaustive list
would consist of things like infinite looping, autoplay, variable width, vertical support,
custom transitions, etc.
</p>
</li>
<li>
<p class="question">
Will these features ever be added to Glider.js?
</p>
<p class="answer">
Glider.js aims to be lightweight and fast. There are some planned upgrades to the list such as adaptive height, but they are not present in version 1.0.
If there is a demand for other features that can be implemented with little overhead, Glider.js will be happy to include them on its next release.
<span class="aside">* Infinite looping will never be supported as its incompatible with native browser scrolling.</span>
</p>
</li>
<li>
<p class="question">
Why should I use Glider.js? What is it good for?
</p>
<p class="answer">
Glider.js works best with large lists of uniform items, such as product upsells.
If you are using a carousel as a UI tool to list elements, you should consider replacing
it with Glider.js. Your mobile users will thank you! (or anyone with a touch device really)
</p>
</li>
<li>
<p class="question">
What browsers are supported?
</p>
<p class="answer">
Glider.js should run on all modern browsers. Support for older browsers can be achieved by polyfilling
<code class="slim">document.classList</code>, <code class="slim">window.requestAnimationFrame</code>,
<code class="slim">Object.assign</code> and <code class="slim">CustomEvent</code>.
<br><br>
Glider.js now provides a <code class="slime">glider-compat.min.js</code>. Include this file to provide support for older browsers.
</p>
</li>
<li>
<p class="question">
How do I get the dots/arrows to show?
</p>
<p class="answer">
In order to remain unopinionated and save on space, Glider.js does not provide default elements
for the paging controls, the elements must exist and be passed to Glider.js
as arguments. Refer to the getting started guide for an example.
</p>
</li>
<li>
<p class="question">
How is Glider.js different from other carousels?
</p>
<p class="answer">
Aside from the fact that Glider.js is "not a carousel", its main benefits are its size, speed and native scrolling design. Due to this,
touch devices benefit from momentum based scrolling while still allowing other default scrolling methods (touch, touchpads, hoz. mousewheel, arrow keys, scrollbars, etc), all within in a tiny
footprint and buttery-smooth performance!
<span class="aside">
NOTE: By default, scrollbars are hidden with CSS for desktops. Remove the code to allow scrollbar functionality.
</aside>
</p>
</li>
</ul>
</section>
</div>
<!-- Footer -->
<footer id="footer">
<p class="copyright">© 2018 <a href="https://nickpiscitelli.com">Nick Piscitelli</a>. Template designed by: <a href="https://html5up.net">HTML5 UP</a>.
<br> <br> Featured in <a href="https://javascriptweekly.com/issues/411">Javascript Weekly!</a> <span style="font-size: 10px;">(thanks!)</span>
<br><br><a id="ghb" class="github-button" href="https://github.com/NickPiscitelli/Glider.js" data-icon="octicon-star" data-size="large" aria-label="Star NickPiscitelli/Glider.js on GitHub">Star Me on Github!</a>
</p>
</footer>
</div>
<!-- Kick-ass template designed by: -->
<!--
Stellar by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<!-- Scripts -->
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/3.0.0-beta.0/cash.min.js"></script>
-- Some people just can't let go
<script>
console.log('blah');
/*
var jQuery = $;
$.fn.extend({
scrollTop: function(){
if (this[0] === window){
return window.pageYOffset || document.body.scrollTop
}
return this[0].scrollTop;
}
});
$.map = function(mapObject, cb){
var keys = Object.keys(mapObject);
for (var i = 0; i < keys.length; ++i){
cb(mapObject[keys[i]], keys[i])
}
};
*/
</script>
-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="assets/js/prism.js"></script>
<script src="assets/js/main.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- I see you. -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-20216161-5', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>