What is Glider.js?

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

Check out the demos below!

Features

  • Insanely Small (< 2.8kb gzipped!)
  • Ridiculously Fast (as low as 25ms initialization!)
  • Vanilla JS - No Dependencies (look Mom, no jQuery!)
  • Native Browser Scroll (momentum scrolling!)
  • Fully Responsive (breakpoint based settings)
  • Customizable Arrow and Dot Navigation
  • Full Keyboard Accessibility + ARIA Labeling
  • Mouse Dragging Support!
  • Flexbox Support (enabled by default)
  • Easily Extendable
  • Custom Events
  • and much more!

Demos

Multiple Items

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

            
              new Glider(document.querySelector('.glider'), {
                slidesToShow: 5,
                slidesToScroll: 5,
                draggable: true,
                dots: '.dots',
                arrows: {
                  prev: '.glider-prev',
                  next: '.glider-next'
                }
              });
            
          

Single Item

1

2

3

4

5

6

7

8

9

10

            
              new Glider(document.querySelector('.glider'), {
                slidesToShow: 1,
                dots: '#dots',
                draggable: true,
                arrows: {
                  prev: '.glider-prev',
                  next: '.glider-next'
                }
              });
            
          

Perspective View(themeable CSS)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

            
              new Glider(document.querySelector('.glider'), {
                slidesToShow: 5,
                slidesToScroll: 1,
                draggable: true,
                dots: '.dots',
                arrows: {
                  prev: '.glider-prev',
                  next: '.glider-next'
                }
              });
            
          
* Custom CSS Required

Responsive Settings / Scroll Lock Support

1

2

3

4

5

6

7

8

9

10

            
              new Glider(document.querySelector('.glider'), {
                // Mobile-first defaults
                slidesToShow: 1,
                slidesToScroll: 1,
                scrollLock: true,
                dots: '#resp-dots',
                arrows: {
                  prev: '.glider-prev',
                  next: '.glider-next'
                },
                responsive: [
                  {
                    // screens greater than >= 775px
                    breakpoint: 775,
                    settings: {
                      // Set to `auto` and provide item width to adjust to viewport
                      slidesToShow: 'auto',
                      slidesToScroll: 'auto',
                      itemWidth: 150,
                      duration: 0.25
                    }
                  },{
                    // screens greater than >= 1024px
                    breakpoint: 1024,
                    settings: {
                      slidesToShow: 2,
                      slidesToScroll: 1,
                      itemWidth: 150,
                      duration: 0.25
                    }
                  }
                ]
              });
            
          

Fractional Slides

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

            
              new Glider(document.querySelector('.glider'), {
                slidesToScroll: 1,
                slidesToShow: 5.5,
                draggable: true,
                dots: '.dots',
                arrows: {
                  prev: '.glider-prev',
                  next: '.glider-next'
                }
              });
            
          

Add/Remove Items

1

2

3

4

5

6

7

8

9

Add Remove

            
              new Glider(document.querySelector('.glider'), {
                slidesToShow: 3,
                dots: '#dots',
                arrows: {
                  prev: '.glider-prev',
                  next: '.glider-next'
                }
              });
            
          

Getting Started

The following minimal HTML structure is required:

          
            <div class="any-class">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
            </div>
          
        

A more comprehensive example with all paging controls would look something like this:

          
            <div class="glider-contain">
              <div class="glider">
                <div>your content here</div>
                <div>your content here</div>
                <div>your content here</div>
                <div>your content here</div>
              </div>

              <button aria-label="Previous" class="glider-prev">«</button>
              <button aria-label="Next" class="glider-next">»</button>
              <div role="tablist" class="dots"></div>
            </div>
          
        

Include Glider.js in your document before the </body> tag:

          
            <script src="glider.js"></script>
          
        

Include the required CSS in your <head> tag

          
            <link rel="stylesheet" type="text/css" href="glider.css">
          
        

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;
                });
              }
            
          

Click to show lazy loading CSS

              
                  // example css
                  .glider-slide img {
                    opacity: 0;
                    transition: opacity .1s ease;
                  }
                  .glider-slide img.loaded {
                    opacity: 1;
                  }
              
            

Methods

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.