# Glide.js: a dependency-free ES6 slider you mount from markup

> Glide.js is an MIT-licensed JavaScript carousel that ships no runtime dependencies, mounts from a CSS selector, and lets you import only the modules you need. It is small, explicit and deliberately unopinionated about everything except sliding.

**glidejs/glide** — A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

- Repository: https://github.com/glidejs/glide
- Website: https://glidejs.com
- Stars: 7,666 · Forks: 758
- Language: JavaScript
- License: MIT
- Published: 2026-09-22 · Updated: 2026-09-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/glidejs-glide

## The problem Glide.js solves: a carousel without a framework

Most carousels arrive attached to something else. They come as a jQuery plugin, a React component, or a build that pulls in a utility library for class manipulation and animation. Glide.js takes the opposite position. The README describes it as a dependency-free JavaScript ES6 slider and carousel, lightweight, flexible and fast, with the tagline "Designed to slide. No less, no more." That sentence is the whole product thesis.

The audience is a front-end developer who already has a page, already has markup, and wants a slider mounted on top of it. You write the slide elements yourself. You add the stylesheets. You call mount. There is no component tree to restructure and no build-tool requirement beyond what you already use, since the README notes it is bundler ready for Rollup or Webpack.

The trade-off is stated plainly by the project itself. Glide.js is not a design system. It gives you core CSS and an optional theme, and everything past that is your CSS and your markup. If you want a carousel that looks finished out of the box, this is not the pitch.

## How Glide.js works: markup, a track, and mounted modules

The mechanism is visible in the required markup. A root element carries the class glide. Inside it, an element with the attribute data-glide-el="track" and the class glide__track wraps a list with class glide__slides, and each child carries glide__slide. The data-glide-el attribute is the hook the library uses to find its parts, which is why the markup shape is not optional.

Initialization takes a selector. In the README example that selector is '.glide', matched against the root element, and mount() starts the instance. Modules are the second half of the design. The default import of @glidejs/glide carries the full feature set, and the README states the cost of that: roughly 23kb, or about 7kb gzipped, with every functionality on board.

The modular entry point changes that. The README shows importing Glide together with named modules from @glidejs/glide/dist/glide.modular.esm.js and passing them into mount as an object, with Controls and Breakpoints as the example pair. The README does not enumerate the complete module list, so the reliable way to learn what is available in your installed version is to read that dist file or the src/ directory in the repository. The package exports map confirms the entry points: dist/glide.esm.js for import, dist/glide.js for require, and a wildcard export for ./dist/*.

## Installing Glide.js and mounting a first slider

The README gives the install as a single npm command against the scoped package name. Run it in your project root.

```bash
npm install @glidejs/glide
```

Next, link the required core stylesheet and, optionally, the theme stylesheet. The README points at the files inside node_modules, which works when you serve that directory directly; in a bundled setup you would copy or import the same files instead.

```html
<!-- 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">
```

Then write the markup. Three empty list items are enough to see the track behave, and the class names and the data-glide-el attribute must match the README exactly.

```html
<div class="glide">
  <div data-glide-el="track" class="glide__track">
    <ul class="glide__slides">
      <li class="glide__slide"></li>
      <li class="glide__slide"></li>
      <li class="glide__slide"></li>
    </ul>
  </div>
</div>
```

Finally, import and mount. With the default import you get everything the library ships.

```js
import Glide from '@glidejs/glide'

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

If you want a smaller script, import the modular build and pass only the modules you use. The README's example pairs Controls with Breakpoints, and the object passed to mount is the selection mechanism.

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

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

After this, the slider responds to drag and to whatever controls those modules render. If nothing moves, check the two things the README makes mandatory: the core stylesheet link and the data-glide-el="track" attribute.

## Where Glide.js stops short

The most concrete limitation is documentation depth on the modular API. The README demonstrates the pattern with two module names and does not list the rest, so trimming your bundle becomes an exercise in reading dist/glide.modular.esm.js or src/ before you can be sure a module exists under that name. That is a real cost for teams that want the 7kb gzipped figure rather than the full build.

Accessibility is the second gap. The README contains no accessibility section, no keyboard navigation notes and no ARIA guidance. Nothing there says the library is inaccessible; it says the project does not document the topic, which leaves the work to you. A carousel that must satisfy an audit is a case where you should verify behaviour directly rather than assume the default covers it.

The third is scope. Glide.js is a slider and nothing else. It has no data layer, no templating and no state management, which is the point, but it also means anything dynamic is your responsibility. If you expected a component that fetches slides or binds to a framework's reactivity, this is the wrong tool. Version history reinforces the maturity picture: v3.7.1 landed on 2024-11-22, v3.7.0 on 2024-11-20 and v3.6.2 on 2024-07-04, so the 3.x line has been stable rather than churning.

## Glide.js against Swiper and the framework-native option

The obvious comparison is Swiper, which covers the same ground and takes a different approach. Swiper ships a much larger feature surface and its own module system, so a typical Swiper setup includes effects, navigation, pagination and accessibility modules that you opt into by name from a documented list. Glide.js inverts the emphasis: a small default, an optional theme stylesheet, and a modular build whose contents you discover from the source rather than from the README.

The difference matters at the edges. If you need a long list of documented effects and a large set of ready-made navigation components, Swiper's breadth is an advantage and Glide.js will feel thin. If you want a slider that adds almost nothing to your bundle and whose markup you fully own, Glide.js is the smaller commitment, and its dependency-free claim means there is no transitive package to audit.

The third option is the framework-native one: a carousel component written for React, Vue or Svelte. That path buys you lifecycle integration and typed props at the cost of coupling the slider to the framework. Glide.js stays outside all of them, which is why the README's bundler note is about Rollup and Webpack rather than about any component model.

## Maintenance, licence and the cost of upgrading

The repository is not archived, and the last push was on 2026-03-21, so the project is still receiving changes rather than being frozen. The release cadence, however, is slow: the three most recent releases are v3.6.2 on 2024-07-04, v3.7.0 on 2024-11-20 and v3.7.1 on 2024-11-22. Plan for a library that changes rarely, which is fine for a slider but means you should not expect new features on a schedule.

Upgrade cost is low in normal use. The public surface is a default export, a selector string and a mount call, plus named modules from the modular build. Staying inside 3.x keeps that shape. The README points readers looking for older documentation to the wiki, which it describes as archived documentation for version ^2.0.0, so a jump from 2.x to 3.x is the upgrade that carries real work, not the patch releases.

Licensing is MIT, with copyright held by Jędrzej Chałubek and the file stating 2014 to present. MIT permits commercial use and modification provided the licence and copyright notice are retained. That is the substance of the licence text, not advice about your situation; if your organisation has specific obligations around attribution, have the relevant person read the LICENSE file rather than this page.

## Building and testing Glide.js from source

If you need to patch the library or verify a change, the repository is buildable with npm scripts. The package.json defines build:css, build:js, build and test, and the README lists the same set with short descriptions: build:css outputs CSS from SASS, build:js outputs all destination variants of the script, build runs the whole library, test runs the complete test suite and lint checks the JavaScript files.

```bash
npm run build
npm test
```

The CSS pipeline uses sass to compile src/assets/sass/glide.core.scss and src/assets/sass/glide.theme.scss into dist/css, and the JavaScript pipeline uses Rollup with separate configs for the ESM and UMD outputs. Tests run through Jest against tests/**/*.test.js.

This matters for one practical reason. Because the README does not list the modular exports, building from source and reading the Rollup config is the most direct way to see exactly which modules end up in dist/glide.modular.esm.js for your version. The repository also carries .eslintrc and .stylelintrc, so lint rules apply to contributions.

## Conclusion

Adopt Glide.js when you want a small carousel whose markup you control and whose module set you can trim. Skip it if you need a component framework binding or a batteries-included widget with built-in pagination UI, autoplay defaults and accessibility tooling. Before committing, open the source of dist/glide.modular.esm.js and confirm which modules exist in the version you install, because the README shows the modular entry point without listing its full export set.

## FAQ

### What is Glide.js used for?

It is a JavaScript slider and carousel for the browser. The README describes it as dependency-free and designed to slide, and it mounts on markup you write yourself using classes such as glide__track and glide__slide.

### Is Glide.js free?

Yes. The README states the project is licensed under the MIT license and is completely free to use, with optional donations through PayPal and GitHub Sponsors.

### How do I install Glide.js?

The README gives npm install @glidejs/glide, then linking the required core stylesheet from node_modules/@glidejs/glide/dist/css/glide.core.min.css and optionally the theme stylesheet.

### How large is Glide.js?

The README states roughly 23kb, or about 7kb gzipped, with every functionality on board, and notes that removing unused modules through the modular build drops the script weight further.

### Which browsers does Glide.js support?

The README lists IE 11 and above, Edge, Chrome 10 and above, Firefox 10 and above, Opera 15 and above, Safari 5.1 and above, and Safari iOS 9 and above.

## Sources

- [glidejs/glide on GitHub](https://github.com/glidejs/glide)
- [License: MIT](https://github.com/glidejs/glide/blob/master/LICENSE)
- [Project website](https://glidejs.com)
- [README](https://github.com/glidejs/glide/blob/master/README.md)
- [Releases](https://github.com/glidejs/glide/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/glidejs-glide