Glide – Designed to slide. No less, no more!

GlideJS

The Glide is a modern, highly configurable, lightweight and dependency-free ES6 Slider / Carousel library. It supports all modern (and modern-mobile) browsers including the not-so-modern Internet Explorer 11. It can also be used as AMD / UMD and ES module!

Download the latest version of Glide as .ZIP or as .TAR package!

npm i @glidejs/glide --save

yarn add @glidejs/glide --save

bower install glidejs --save

Instructions

The Glide Slider / Carousel library is available in an (un)minified as well as (modular) ES6 Module Script Version. The package itself contains also the core Glide Styles as well as an example theme, which can be used to create your own one, of course.

 

Load Glide

It’s recommended to load Glides packaged Stylesheets (or custom ones, respectivly) directly within the HTML <head> element. The JavaScript file can be located wherever you want, but we recommend to load the script directly after the opened <body> tag.

<DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/glide.core.css" />
        
        <!-- Optional Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/glide.theme.css" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/glide.min.js"></script>
        
        <!-- Required HTML Structure -->
        <div class="glide">
            <div class="glide__track" data-glide-el="track">
                <ul class="glide__slides">
                    <li class="glide__slide">Slide #1</li>
                    <li class="glide__slide">Slide #2</li>
                    <li class="glide__slide">Slide #3</li>
                </ul>
            </div>
        </div>
    </body>
</html>

 

Configure Glide

The library offers many options to configure the design and it’s behavior. It offers also many HTML Attributes and Settings, so it’s really recommended to read the official documentation.

document.addEventListener("DOMContentLoaded", {
    var glide = new Glide(".glide", {
        type:                   "slider",
        startAt:                0,
        perView:                1,
        focusAt:                0,
        gap:                    10,
        autoplay:               false,
        hoverpause:             true,
        keyboard:               true,
        bound:                  false,
        swipeThreshold:         80,
        dragThreshold:          120,
        perTouch:               false,
        touchRatio:             0.5,
        touchAngle:             45,
        animationDuration:      400,
        rewind:                 true,
        rewindDuration:         800,
        animationTimingFunc:    "cubic-bezier(0.165, 0.840, 0.440, 1.000)",
        direction:              "ltr",
        peek:                   0,
        breakpoints:            {},
        classes:                {
            direction: {
                ltr:        "glide--ltr",
                rtl:        "glide--rtl"
            },
            slider:         "glide--slider",
            carousel:       "glide--carousel",
            swipeable:      "glide--swipeable",
            dragging:       "glide--dragging",
            cloneSlide:     "glide__slide--clone",
            activeNav:      "glide__bullet--active",
            activeSlide:    "glide__slide--active",
            disabledArrow:  "glide__arrow--disabled"
        },
        throttle:               25
    });
});

 

Configure: Options

type
Type of the movement. Available types: slider – rewinds slider to the start/end when it reaches first or last slide and carousel – changes slides without starting over when it reaches first or last slide.
startAt
Start at specific slide number defined with zero-based index.
perView
A number of slides visible on the single viewport.
focusAt
Focus currently active slide at a specified position in the track. Available inputs: "center" – current slide will be always focused at the center of a track or 1,2,3... – current slide will be focused on the specified zero-based index.
gap
A size of the gap added between slides.
autoplay
Change slides after a specified interval. Use false for turning off autoplay.
hoverpause
Stop autoplay on mouseover event.
keyboard
Allow for changing slides with left and right keyboard arrows.
bound
Stop running perView number of slides from the end. Use this option if you don’t want to have an empty space after a slider. Works only with slider type and a non-centered focusAt setting.
swipeThreshold
Minimal swipe distance needed to change the slide. Use false for turning off a swiping.
dragThreshold
Minimal mouse drag distance needed to change the slide. Use false for turning off a dragging.
perTouch
A maximum number of slides to which movement will be made on swiping or dragging. Use false for unlimited.
touchRatio
Alternate moving distance ratio of the slides on a swiping and dragging.
touchAngle
Angle required to activate slides moving on swiping or dragging.
animationDuration
Duration of the animation in milliseconds.
rewind
Allows looping the slider type. Slider will rewind to the first/last slide when it’s at the start/end. Works only with slider type.
rewindDuration
Duration of the rewinding animation of the slider type in milliseconds.
animationTimingFunc
Easing function for the animation.
direction
Moving direction mode. Available inputs:"ltr" – left to right movement or rtl – right to left movement.
peek
The distance value of the next and previous viewports which have to peek in the current view. Accepts number and pixels as a string. Left and right peeking can be setup separately with a directions object. For example: 100 – peek 100px on the both sides or { before: 100, after: 50 } – peek 100px on the left side and 50px on the right side.
breakpoints
Collection of options applied at specified media breakpoints. For example, display two slides per view under 800px:
classes
Collection of internally used HTML classes.
throttle
Throttle costly events at most once per every wait milliseconds.

Leave a Reply

Top