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!)
Initialize Glider.js inline or via your script files
window.addEventListener('load', function(){
new Glider(document.querySelector('.glider'), {
setting-name: setting-value
})
})
That's it! You're done!
Settings
slidesToShow Type:Number | String Default: 1
The number of slides to show in container
If this value is set to auto, it will be automatically calculated based upon the number
of items able to fit within the container viewport. This requires setting the itemWidth option.
slidesToScroll Type:Number | String Default: 1
The number of slides to scroll when arrow navigation is used
If this value is set to auto, it will match the value of slidesToShow.
arrows Type:Object Default: undefined
An object containing the prev/next arrow settings Keys: prev | next Type:Element | String (HTML Selector)
dots Type:Element | String (HTML Selector) Default: undefined
An HTML element or selector containing the dot container
itemWidth Type:Number Default: undefined
This value is ignored unless slidesToShow is set to auto, in which it is then required.
exactWidth Type:Boolean Default: undefined
This prevents resizing items to fit when slidesToShow is set to auto.
NOTE: This will yield fractional slides if your container is not sized appropriately
scrollLock Type:Boolean Default: false
If true, Glider.js will scroll to the nearest slide after any scroll interactions
scrollLockDelay Type:Number Default: 250
When scrollLock is set, this is the delay in milliseconds to wait before the scroll happens
resizeLock Type:Boolean Default: true
If true, Glider.js will lock to the nearest slide on resizing of the window
responsive Type:Array of Objects [{}] Default: undefined
An object containing custom settings per provided breakpoint. See demo for details.
NOTE: All responsive calculation are provided "mobile-first".
rewind Type:Boolean Default: false
If true, Glider.js will scroll to the beginning/end when its respective endpoint is reached
scrollPropagate Type:Boolean Default: false
Whether or not to release the scroll events from the container
draggable Type:Boolean Default: false
If true, the list can be scrolled by click and dragging with the mouse
dragVelocity Type:Number Default: 3.3
How much to aggravate the velocity of the mouse dragging
duration Type:Number Default: 0.5
An aggravator used to control animation speed. Higher is slower!
eventPropagate Type:Boolean Default: true
Whether or not Glider.js events should bubble (useful for binding events to all carousels)
skipTrack Type:Boolean Default: false
Whether or not Glider.js should skip wrapping its children with a 'glider-track' <div>.
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.
Events
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.
glider-loaded
Called after Glider.js is first initialized
glider-refresh
Called whenever Glider.js refreshes its elements or settings
glider-animated
Called whenever a Glider.js paging animation is complete
glider-add
Called whenever an item is added to Glider.js
glider-remove
Called whenever an item is removed from Glider.js
glider-destroy
Called whenever a Glider.js is destroyed
glider-slide-visible
Called whenever a slide is shown. Passed an object containing the slide index
glider-slide-hidden
Called whenever a slide is hidden. Passed an object containing the slide index
Event Example - Lazy Loading Images
A reference to the Glider.js object can be retrieved by re-calling Glider.js with the glider elements
as its sole argument: var glider = Glider(document.querySelector('.glider'));. Any custom
event data is passed via the event, located at event.detail
// 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;
});
}
Methods are called directly on the Glider object returned from initialization.
Examples:
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();
addItem(element) Arguments:Element
Add an item to the list
removeItem(itemIndex) Arguments:Number
Remove an item from the list NOTE: Slide position starts at 0, not 1!
setOption(arguments, global) Arguments:Object, Boolean
Overrides options set during initialization. If called when a breakpoint is active, the settings
for the active breakpoint are updated.
If second argument is true, the global settings are updated regardless of active breakpoint.
Required for overriding responsive setting itself
scrollItem(slideIndex, isActuallyDotIndex) Arguments:String | Number, Boolean
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.
scrollTo(pixelOffset) Arguments:Number
Scroll directly to supplied scroll position in pixels
refresh(rebuildPaging) Arguments:Boolean
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.
updateControls() Arguments: None
Force a refresh of Glider.js navigation controls
destroy()
Destroy Glider.js.
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.
FAQ
What is Glider.js?
Glider.js is a fast, lightweight, responsive, dependency-free scrollable list with customizable paging controls.
What isn't Glider.js?
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.
Will these features ever be added to Glider.js?
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.
* Infinite looping will never be supported as its incompatible with native browser scrolling.
Why should I use Glider.js? What is it good for?
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)
What browsers are supported?
Glider.js should run on all modern browsers. Support for older browsers can be achieved by polyfilling
document.classList, window.requestAnimationFrame,
Object.assign and CustomEvent.
Glider.js now provides a glider-compat.min.js. Include this file to provide support for older browsers.
How do I get the dots/arrows to show?
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.
How is Glider.js different from other carousels?
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!
NOTE: By default, scrollbars are hidden with CSS for desktops. Remove the code to allow scrollbar functionality.