A fast, light-weight, responsive free-flowing list with paging controls.
Demos and full documentation available on Github Pages: https://nickpiscitelli.github.io/Glider.js/
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'), {
slidesToShow: 1,
slidesToScroll: 1,
duration: .5,
equalHeight: false,
scrollPropagate: false,
eventPropagate: true,
easing: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
dots: '.glider-dots',
arrows: {
prev: '.glider-prev',
next: '.glider-next'
},
// Glider.js breakpoints are mobile-first
// be conscious of your ordering
responsive: [
{
breakpoint: 575,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 900,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
}
]
});
Change options:
document.querySelector(element_path)._glider.setOption({
name: value,
...
});
Bind event:
document.querySelector(element_path).addEventListener('glider-slide-visible', function(event){
// `this` is bound to the glider object
...
});
Destroy with:
document.querySelector(element_path)._glider.destroy();
Glider.js should run on all modern browsers. Support for older browser can be achieved by polyfilling document.classList
, window.requestAnimationFrame
and CustomEvent
None :)
Copyright (c) 2018 Nick Piscitelli
Licensed under the MIT license.
It's all yours.