Comment utiliser : Générateur de slider Glide.js
- Choisissez les options de votre slider Glide.js ainsi que le contenu des slides : panneaux de démonstration, vos propres URL d'images ou des cartes.
- Définissez le nombre de slides visibles pour ordinateur, tablette et mobile, l'espacement, l'effet, la boucle, la lecture automatique, les flèches et la pagination.
- Vérifiez l'aperçu en direct aux largeurs ordinateur, tablette et mobile.
- Copiez le HTML, le CSS et le JavaScript (CDN ou npm), ou téléchargez une page HTML complète.
À propos de Glide.js
Glide.js est un slider ES6 minuscule (environ 7 Ko min + gzip), sans dépendance, basé sur les transformations CSS. Il se concentre sur l'essentiel (perView, espacements, breakpoints, lecture automatique, glissement et clavier) et laisse le balisage et le style à votre charge. Il est idéal lorsque le poids de la page compte plus que les effets.
Terminologie de Glide
| Option | Signification |
|---|---|
type: 'carousel' | Boucle infinie (duplique les slides) |
type: 'slider' | S'arrête à la première et à la dernière slide |
perView, gap | Slides visibles et espacement en px |
focusAt: 'center' | Centre la slide active |
breakpoints | Basé sur la largeur maximale : 767: { perView: 1 } |
data-glide-el="controls" | Points d'accroche HTML pour les flèches (data-glide-dir="<") et les puces (controls[nav]) |
Ce que Glide ne fait pas
Il n'existe ni effets fondu, vertical ou 3D, et les fonctionnalités d'accessibilité sont basiques : ajoutez des aria-label aux contrôles (le balisage généré les inclut). Si vous avez besoin de ces fonctionnalités, passez le générateur sur Swiper ou Splide : vos réglages seront conservés.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Taille (min + gzip, JS) | ~40 Ko (bundle) | ~12 Ko | ~7 Ko | ~12 Ko + jQuery ~30 Ko |
| Dépendances | Aucune | Aucune | Aucune | jQuery |
| Effets | Glissement, fondu, cube, coverflow, flip, cartes, créatif | Glissement, fondu | Glissement | Glissement, fondu |
| Vertical | Oui | Oui | Non | Oui |
| Accessibilité | Bonne (module a11y) | Excellente (ARIA par défaut) | Basique | Basique |
| Maintenance | Oui | Oui | Lente | Non (dernière version 2017) |
| Licence | MIT pour les quatre | |||
Aussi recherché comme : glide js, glidejs carousel, slider glide js, carrousel léger javascript, exemple glide js, glide breakpoints, générateur carrousel javascript.
Outils complémentaires : Générateur de slider Glide.js
- Générateur de slider et carrousel — Configurez un carrousel au clic plutôt qu'en lisant la documentation : choisissez une bibliothèque, définissez les points de rupture, les effets et les commandes, observez l'aperçu en direct et copiez le HTML, CSS et JavaScript prêts pour la production.
- Générateur Swiper Slider — Configurez Swiper 11 avec un éditeur visuel (breakpoints responsives, effets, lecture automatique, types de pagination et plus), puis copiez le HTML, le CSS et le JavaScript prêts à l'emploi.
- Générateur Splide — Créez un carrousel Splide accessible et léger sans lire la documentation : réglez les options, vérifiez l'aperçu sur trois tailles d'écran et copiez le code.
- Minifieur JavaScript — Collez votre JavaScript et obtenez du code minifié prêt pour la production grâce à Terser, le même moteur que Vite, webpack et Rollup, avec une comparaison avant/après et les tailles gzip.
Questions fréquentes
Glide.js prend-il en charge les sliders en fondu ou verticaux ?
Non. Glide ne fait que du glissement horizontal. Utilisez Swiper ou Splide pour les effets fondu, vertical ou 3D.
Pourquoi mes puces Glide ne fonctionnent-elles pas ?
Le conteneur des puces doit avoir
data-glide-el="controls[nav]" et un bouton par slide avec data-glide-dir="=index". Le HTML généré inclut les deux.Glide.js est-il toujours maintenu ?
Il est stable et reste largement utilisé, même si les mises à jour sont peu fréquentes. Il n'a aucune dépendance, il continue donc de fonctionner.
Puis-je installer Générateur de slider Glide.js en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur de slider Glide.js 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.