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


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


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>
        <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" />
        <!-- 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>


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 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.
Start at specific slide number defined with zero-based index.
A number of slides visible on the single viewport.
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.
A size of the gap added between slides.
Change slides after a specified interval. Use false for turning off autoplay.
Stop autoplay on mouseover event.
Allow for changing slides with left and right keyboard arrows.
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.
Minimal swipe distance needed to change the slide. Use false for turning off a swiping.
Minimal mouse drag distance needed to change the slide. Use false for turning off a dragging.
A maximum number of slides to which movement will be made on swiping or dragging. Use false for unlimited.
Alternate moving distance ratio of the slides on a swiping and dragging.
Angle required to activate slides moving on swiping or dragging.
Duration of the animation in milliseconds.
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.
Duration of the rewinding animation of the slider type in milliseconds.
Easing function for the animation.
Moving direction mode. Available inputs:"ltr" – left to right movement or rtl – right to left movement.
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.
Collection of options applied at specified media breakpoints. For example, display two slides per view under 800px:
Collection of internally used HTML classes.
Throttle costly events at most once per every wait milliseconds.

Leave a Reply