# Glider.js: a native scrolling carousel that stays under 3 kB

> Glider.js replaces transform-based carousel logic with the browser's own scroll behaviour. It is a good fit for small static sites and a poor fit for teams that need a maintained release cadence.

**NickPiscitelli/Glider.js** — A fast, lightweight, dependency free, native scrolling carousel alternative!

- Repository: https://github.com/NickPiscitelli/Glider.js
- Website: https://nickpiscitelli.github.io/Glider.js
- Stars: 3,314 · Forks: 292
- Language: JavaScript
- License: MIT
- Published: 2026-09-24 · Updated: 2026-09-24 · Language: en
- Canonical page: https://hysenlabs.com/projects/nickpiscitelli-glider-js

## The problem Glider.js solves, and for whom

Most JavaScript carousels take over scrolling. They translate a track with transforms, intercept touch and wheel events, and reimplement momentum and snapping. That approach gives fine control, but it also means the library owns gesture handling, and every browser quirk becomes the library's problem. Glider.js takes the opposite route: the slides sit in a scrollable element, and the browser does the scrolling. The project describes itself as a "native scrolling list with paging controls, methods and events", and the README states the whole thing is under 2.8 kB gzipped with no dependencies.

That makes it a reasonable choice for a marketing page, a documentation site, or an embedded widget where you want paging arrows and dots without pulling in a framework. It is aimed at people who are comfortable writing plain HTML, adding a stylesheet, and calling a constructor. The repository is a single JavaScript file plus a CSS file, with a docs/ folder that holds the demos and the GitHub Pages site. There is no build step required to use it: glider.js, glider.min.js, glider.css and glider.min.css all sit at the top level of the repository.

## How native scrolling changes the architecture

The mechanism is visible in the markup the README gives. You put a container with the class glider around a set of child elements. Glider.js wraps the children in a track element and lets that track scroll horizontally. Paging controls move the scroll position rather than a transform matrix, and the visible-slide events fire as the scroll position changes.

The options reflect that design. slidesToShow and slidesToScroll accept the string 'auto', which the README says allows automatic responsive width calculations. itemWidth is documented with an admission that it should have been named itemMinWidth: slides grow to fit the container viewport, and the setting is ignored unless slidesToShow is 'auto'. Setting exactWidth to true stops slides from being resized to fit the viewport and requires itemWidth to be set, which the README warns may produce fractional slides. Breakpoints are mobile-first, so a responsive array is read from the smallest breakpoint upward, and each entry carries a breakpoint number plus a settings object.

Because the browser owns the scroll, the library has to deal with the scrollbar. The README notes that most browsers now support scrollbar-width and that the property is marked experimental. For Firefox it documents a workaround that wraps the glider in a div with the class glider-wrap, applies a negative margin-bottom of 17px to .glider-track inside a @-moz-document block, hides overflow on the wrapper, and then adjusts the wrapper height in a glider-loaded and glider-refresh handler. The comment in that handler says the scrollbar height is "Currently 17, may change with updates". That is a hard-coded browser metric living in your page, and it is the clearest sign of what native scrolling costs you.

## Installing Glider.js from npm and running a first carousel

The README gives two distribution paths. You can link the files from jsDelivr, or install the package and serve the files yourself. The package name on npm is glider-js, which is not the same as the repository name, so the install command is worth reading twice.

```bash
npm install glider-js
```

or, if the project uses Yarn:

```bash
yarn add glider-js
```

If you would rather not run a package manager, the README shows the same files served from jsDelivr. Add the stylesheet first, then the script, both before your own code runs.

```html
<link rel="stylesheet" href="glider.min.css">
or
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.css">
```

```html
<script src="glider.min.js"></script>
or
<script src="https://cdn.jsdelivr.net/npm/glider-js@1/glider.min.js"></script>
```

The markup is a container with the class glider and one child element per slide. The README's example uses six plain divs numbered 1 through 6.

```html
<div class="glider">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
  <div> 6 </div>
</div>
```

Initialization is one constructor call. The README's minimal example passes only the element, and the full example passes an options object with slidesToShow, slidesToScroll, dots, arrows and a responsive array.

```javascript
new Glider(document.querySelector('.glider'));
```

If you pass options, the README's full example sets slidesToShow and slidesToScroll to 'auto', points dots and the prev and next arrows at CSS selectors, and lists responsive entries at breakpoint 900 and breakpoint 575. After the constructor runs, you should see the six divs laid out in a scrollable track with the controls you configured. To change an option later, the README shows Glider(element).setOption({ name: value }) followed by an optional Glider(element).refresh().

## Where Glider.js is the wrong tool

The repository has no test script. The test entry in package.json is a command that prints "Error: no test specified" and exits with status 1. There is no test directory at the top level. For a component that handles scroll position, resize behaviour and breakpoint changes, that means the correctness of a change rests on manual checks in the docs demos. If your team requires a runnable suite before upgrading a dependency, this project does not offer one.

The release history is also uneven. The most recent release listed is v1.7.10 from 2026-04-16, but the two entries before it are marked as latest releases from 2022-10-26 and 2021-03-07. The last push to the repository was on 2026-05-06. That is a long gap between tags, and it means an issue you file may sit for a while. Treat the version you install as the version you will be running for the foreseeable future.

There are functional limits too. The README documents draggable as false by default, so mouse dragging is opt-in, and dragVelocity controls how far each mouse delta scrolls. The event options scrollPropagate and eventPropagate exist to control whether scroll and other events bubble out of the glider, which tells you the component sits close enough to native behaviour that event leakage is a real concern. If your page has a vertically scrolling body and the carousel sits inside it, you are the one who has to reason about which axis wins.

## react-glider and the wrapper question

The README lists one package built on Glider.js: react-glider, described as a React wrapper written in TypeScript. The difference in approach is not cosmetic. Glider.js mutates the DOM directly. It wraps children in a track element, reads element widths, and writes scroll positions. A React wrapper has to hand that DOM to the library and keep React from reconciling over the top of it. That is the same tension every imperative DOM library has inside a declarative renderer, and it is why wrappers for this class of library tend to lag the core.

If you are in React and your slide set changes often, the wrapper is the pragmatic path, but you are adding a second project to your dependency tree whose release timing is independent of Glider.js itself. If your slide set is static, the simpler option is to render the markup in React and call new Glider() in an effect, then call destroy() on cleanup. The README documents destroy() as the teardown call, and it also documents Glider(element).refresh() for when the layout changes. Those two methods are the ones a framework integration depends on.

## Maintenance, licence and the cost of upgrading

The last push to the repository was on 2026-05-06, and the most recent release listed is v1.7.10 from 2026-04-16. The repository is not archived. That combination means the project is not abandoned, but the spacing between releases, with 2022-10-26 and 2021-03-07 before it, means you should not assume a regular cadence.

The practical upgrade cost is low in one sense and awkward in another. Low, because there is no dependency graph to reconcile: the README states the dependencies section as "None". Awkward, because the minified files are committed to the repository and regenerated by a lint-staged hook. The hook in package.json runs prettier --write, standard --fix, and two uglifyjs commands that write glider.min.js and docs/assets/js/glider.min.js before staging them. If you vendor the source rather than the minified file, you are the one running that pipeline.

The licence is MIT, with the copyright line reading "Copyright (c) 2018 Nick Piscitelli" and the README closing with "It's all yours." MIT permits commercial use and modification with the licence and copyright notice retained. That is a permissive position with few obligations, but it is not legal advice, and if you redistribute a modified glider.js you should read the licence text in LICENSE.txt yourself rather than rely on a summary.

## Conclusion

Adopt Glider.js when you want a small, dependency-free carousel on a site you control and you are comfortable reading the source when the documentation is silent. Do not adopt it if you need a supported release channel, a test suite you can run, or a fix cadence you can plan around: the last push was on 2026-05-06 and the most recent tagged release before that was 2022-10-26. Before you commit, verify the option names against the version you install, check that the Firefox scrollbar workaround is still needed in your target browsers, and confirm that the bundled CSS matches your layout at each breakpoint you use.

## FAQ

### What is the best JavaScript carousel library?

That depends on what you need. Glider.js is a native scrolling list with paging controls, methods and events, under 2.8 kB gzipped with no dependencies, which suits pages that want a small script rather than a transform-based track.

### What is a slick slider?

The README does not describe slick slider. It names react-glider as the only package built on Glider.js, so a comparison between slick and Glider.js is outside what the README and repository files cover.

### What is a carousel in HTML?

In Glider.js the HTML is a container with the class glider holding one child element per slide. Glider.js wraps those children in a track element and lets the browser scroll it, with paging controls, methods and events on top.

## Sources

- [License: MIT](https://github.com/NickPiscitelli/Glider.js/blob/master/LICENSE)
- [NickPiscitelli/Glider.js on GitHub](https://github.com/NickPiscitelli/Glider.js)
- [Project website](https://nickpiscitelli.github.io/Glider.js)
- [README](https://github.com/NickPiscitelli/Glider.js/blob/master/README.md)
- [Releases](https://github.com/NickPiscitelli/Glider.js/releases)

---

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