GitHub - NickPiscitelli/Glider.js: A blazingly fast, lightweight, dependency fre...
source link: https://github.com/NickPiscitelli/Glider.js
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
Glider.js
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/
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'), { slidesToShow: 1, slidesToScroll: 1, duration: .5, dots: '.glider-dots', arrows: { prev: '.glider-prev', next: '.glider-next' }, // 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, // 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();
Browser support
Glider.js should run on all modern browsers. Support for older browser can be achieved by polyfilling document.classList
, window.requestAnimationFrame
and CustomEvent
Dependencies
None :)
License
Copyright (c) 2018 Nick Piscitelli
Licensed under the MIT license.
It's all yours.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK