Comment utiliser : 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' | Centers 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) |
| License | MIT for all four | |||
Aussi recherché comme : glide js, glidejs carousel, glide slider, lightweight carousel, glide js example, glide breakpoints.
Outils complémentaires : 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.
- Swiper Slider Generator — Configure Swiper 11 with a visual editor — responsive breakpoints, effects, autoplay, pagination types and more — and copy ready-to-use 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.
Questions fréquentes
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.
Puis-je installer Glide.js Slider Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. Glide.js Slider Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.