- 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!)
-
- 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.
-
-
+ 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!)
+
+ 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.
+
+
