Author: | NickPiscitelli |
---|---|
Views Total: | 14,727 views |
Official Page: | Go to website |
Last Update: | November 18, 2018 |
License: | MIT |
Preview:

Description:
Glider.js is a lightweight but powerful JavaScript plugin to create responsive, accessible, touch-enabled carousels/scrollers for the web.
More features:
- Scrolls through items with momentum scrolling effect.
- Custom navigation controls.
- Fully accessible.
- Allows multiple items on the same slide.
- Supports fractional slides.
- Allows you to dynamically add/remove items using JS.
- Easing functions.
- Useful API.
How to use it:
Download and import the Glider plugin’s files into the document.
<link rel="stylesheet" href="glider.min.css"> <script src="glider.js"></script>
Insert your own slides into the glider container.
<div class="glider"> <div> Slide 1 </div> <div> Slide 2 </div> <div> Slide 3 </div> <div> Slide 4 </div> <div> Slide 5 </div> ... </div>
Create a new glider with default options.
new Glider(document.querySelector('.glider'));
Adds navigation arrows and pagination bullets to the glider.
<div id="dots"></div> <a class="glider-prev">«</a> <a class="glider-next">»</a>
new Glider(document.querySelector('.glider'),{ dots: '#dots', arrows: { prev: '.glider-prev', next: '.glider-next' } });
Specify the number of slides to scroll at a time.
new Glider(document.querySelector('.glider'),{ slidesToScroll: 1 });
Specify the number of slides to show at a time.
new Glider(document.querySelector('.glider'),{ slidesToShow: 1 });
Set the item width.
new Glider(document.querySelector('.glider'),{ itemWidth: 150 });
Set the duration of the animation.
new Glider(document.querySelector('.glider'),{ duration: .5 });
Enable the draggable functionality.
new Glider(document.querySelector('.glider'),{ // allow mouse dragging draggable: false, // how much to scroll with each mouse delta dragVelocity: 3.3, });
Enable the scroll lock functionality.
new Glider(document.querySelector('.glider'),{ // 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, });
Customize the easing function.
new Glider(document.querySelector('.glider'),{ easing: function (x, t, b, c, d) { return c*(t/=d)*t + b; } });
Customize the glider when running on different devices:
new Glider(document.querySelector('.glider'),{ responsive: [{ breakpoint: 820, settings: { slidesToScroll: 4, slidesToShow: 4, dots: false, arrows: false } }, { breakpoint: 800, settings: { slidesToScroll: 3, slidesToShow: 4 } }, { breakpoint: 775, settings: { slidesToScroll: 3, slidesToShow: 3, dots: false, arrows: false } }, { breakpoint: 750, settings: { slidesToScroll: 3, slidesToShow: 3 } },{ breakpoint: 725, settings: { slidesToScroll: 1, slidesToShow: 2, dots: false, arrows: false } }, { breakpoint: 700, settings: { slidesToScroll: 1, slidesToShow: 1, arrows: false } }] });
API methods.
// update options glider.setOption({ // options here }); // refresh the plugin glider.refresh(true); // update controls glider.updateControls // remove an item glider.removeItem(2); // scroll to item 2 glider.scrollTo(2); // scroll to a specific slide glider.scrollItem(2); // destroy the plugin glider.destroy();
Event handlers available.
document.querySelector('.glider').addEventListener('glider-loaded', function(event){ // when loaded }); document.querySelector('.glider').addEventListener('glider-refresh', function(event){ // when refreshed }); document.querySelector('.glider').addEventListener('glider-animated', function(event){ // when animation completed }); document.querySelector('.glider').addEventListener('glider-add', function(event){ // after an item added }); document.querySelector('.glider').addEventListener('glider-remove', function(event){ // after an item removed }); document.querySelector('.glider').addEventListener('glider-slide-hidden', function(event){ // when a slide is hidden }); document.querySelector('.glider').addEventListener('glider-slide-visible', function(event){ // when a slide is shown }); document.querySelector('.glider').addEventListener('glider-destroy', function(event){ // after destroy });
Changelog:
11/18/2018
- Full keyboard accessibility
11/15/2018
- Providing option to always set global settings in setOption
11/13/2018
- Change event emitter function name
11/11/2018
- Fix setOption bug
- CSS Tweaks