How to use the Glide.js Slider Generator
- Pick options for your Glide.js slider and the slide content: demo panels, your own image URLs or cards.
- Set slides per view for desktop, tablet and mobile, the gap, effect, loop, autoplay, arrows and pagination.
- Check the live preview at desktop, tablet and mobile widths.
- Copy the HTML, CSS and JavaScript (CDN or npm), or download a complete HTML page.
About Glide.js
Glide.js is a tiny (about 7 KB min + gzip), dependency-free ES6 slider built on CSS transforms. It focuses on the essentials — perView, gaps, breakpoints, autoplay, swipe and keyboard — and keeps markup and styling up to you. It is ideal when page weight matters more than effects.
Glide terminology
| Option | Meaning |
|---|---|
type: 'carousel' | Infinite loop (clones slides) |
type: 'slider' | Stops at the first and last slide |
perView, gap | Visible slides and the gap in px |
focusAt: 'center' | Centres the active slide |
breakpoints | Max-width based: 767: { perView: 1 } |
data-glide-el="controls" | Markup hooks for arrows (data-glide-dir="<") and bullets (controls[nav]) |
What Glide does not do
There are no fade, vertical or 3D effects, and accessibility features are basic — add aria-labels to controls (the generated markup includes them). If you need those features, switch the generator to Swiper or Splide; your settings carry over.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Size (min + gzip, JS) | ~40 KB (bundle) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Dependencies | None | None | None | jQuery |
| Effects | Slide, fade, cube, coverflow, flip, cards, creative | Slide, fade | Slide | Slide, fade |
| Vertical | Yes | Yes | No | Yes |
| Accessibility | Good (a11y module) | Excellent (ARIA by default) | Basic | Basic |
| Maintained | Yes | Yes | Slowly | No (last release 2017) |
| Licence | MIT for all four | |||
Tools that pair well with the Glide.js Slider Generator
- Slider & Carousel Generator — Configure a carousel with clicks instead of reading docs: choose a library, set breakpoints, effects and controls, watch the live preview and copy production-ready HTML, CSS and JavaScript.
- Splide Slider Generator — Build an accessible, lightweight Splide carousel without reading the docs — set the options, check the preview at three screen sizes and copy the code.
- JavaScript Minifier — Paste JavaScript and get production-ready minified code from Terser — the same engine used by Vite, webpack and Rollup — with real before/after and gzipped sizes.
- Online HTML Editor — A lightweight code playground: edit HTML, CSS and JavaScript side by side, see the result instantly, read console output and download your page as one HTML file.
Frequently asked questions
Does Glide.js support fade or vertical sliders?
No. Glide only slides horizontally. Use Swiper or Splide for fade, vertical or 3D effects.
Why do my Glide bullets not work?
The bullets container needs
data-glide-el="controls[nav]" and one button per slide with data-glide-dir="=index" — the generated HTML includes both.Is Glide.js maintained?
It is stable and still widely used, though releases are infrequent. It has no dependencies, so it keeps working.