There are several ways to pull-in Glide.js into your project.


It is a recommended way. This installation method guarantees a trouble-free use with bundlers like Webpack or Rollup.

# Install the last stable version
$ npm install @glidejs/glide


You can also traditionally download latest files from the Github:

Download latest release


You can also use a reference to some of the popular CDN services:

Explanation of Different Builds

Glide.js is built in a few different variants. They can be found in the dist/ directory.

  • Complete - Builds that contains both required and optional modules.
  • Modular - Builds that contains only required modules. Optional modules are exported for import on demand.
UMD ES Module
Complete glide.js glide.esm.js
Modular --- glide.modular.esm.js
Complete (minified) glide.min.js ---



Glide.js styles are divided into two separate files:

  • glide.core - Core styles, required for Glide.js to work
  • glide.theme - Visual styles. Optional styling for markup.

This way, the library doesn't force you to overwrite it's visual styles if you want to implement your own look.

Provide <link> to the stylesheets .css files.

<!-- Required Core Stylesheet -->
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.core.min.css">

<!-- Optional Theme Stylesheet -->
<link rel="stylesheet" href="node_modules/@glidejs/glide/dist/css/glide.theme.min.css">

Using SASS @import

Import .scss files directly from the source directory.

// Required Core Stylesheet
@import "node_modules/@glidejs/glide/src/assets/sass/glide.core";

// Optional Theme Stylesheet
@import "node_modules/@glidejs/glide/src/assets/sass/glide.theme";


Prepare the main markup. Remember to add a data-glide-el="track" attribute on track element.

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">0</li>
      <li class="glide__slide">1</li>
      <li class="glide__slide">2</li>


Creating controls involves using two data attributes:

  • data-glide-el="controls" - Controls wrapper indicator that contains all controls elements
  • data-glide-dir="{pattern}" - Movement schema of the particular control
<div data-glide-el="controls">
  <button data-glide-dir="<<">Start</button>
  <button data-glide-dir=">>">End</button>

Schema value of the data-glide-dir attribute must be in special format:

  • > - Move one forward
  • < - Move one backward
  • ={i} - Go to zero-based {i} slide (eq. '=1', will go to second slide)
  • >> - Rewinds to the end (last slide)
  • << - Rewinds to the start (first slide)


Knowing about the controls, preparing the arrows navigation is quite simple.

<div class="glide">
  <div class="glide__track" data-glide-el="track">...</div>

  <div class="glide__arrows" data-glide-el="controls">
    <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
    <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>


Making a bullets navigation is pretty similar. However, use the data-glide-el="controls[nav]" to activate toggling an activity class on control elements inside.

<div class="glide">
  <div class="glide__track" data-glide-el="track">...</div>

  <div class="glide__bullets" data-glide-el="controls[nav]">
    <button class="glide__bullet" data-glide-dir="=0"></button>
    <button class="glide__bullet" data-glide-dir="=1"></button>
    <button class="glide__bullet" data-glide-dir="=2"></button>


Finally, we are ready to initialize and mount a Glide

Using <script>

Simply reference a minified version of the script.

<script src="node_modules/@glidejs/glide/dist/glide.min.js"></script>

  new Glide('.glide').mount()

Using ES Modules

import Glide from '@glidejs/glide'

new Glide('.glide').mount()

Need a few selected modules? Import and mount only needed components. In pair with a bundler's tree-shaking it's a great way to reduce the total weight your code!

Notice that we are using here a path to the modular build. Go back to explanation section to learn more.

import Glide, { Controls, Breakpoints } from '@glidejs/glide/dist/glide.modular.esm'

new Glide('.glide').mount({ Controls, Breakpoints })