Comment utiliser : Générateur Splide
- Choisissez les options de votre slider Splide et le contenu des diapositives : panneaux de démonstration, vos propres URL d'images ou cartes.
- Définissez le nombre de diapositives 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 sur des largeurs bureau, 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 Splide
Splide est un slider sans dépendance d'environ 12 Ko (min + gzip), reconnu pour son accessibilité : il ajoute automatiquement les rôles, étiquettes et zones live ARIA ainsi que la prise en charge du clavier, en suivant le modèle WAI-ARIA des carrousels. Il prend en charge les modes boucle et fondu, la lecture automatique avec un bouton lecture/pause, le chargement différé, les sliders verticaux et des extensions comme le défilement automatique et la vidéo.
Options générées par le générateur
| Option | Signification |
|---|---|
type | slide, loop ou fade (fade affiche une seule diapositive ; utilisez rewind pour la faire boucler) |
perPage, gap | Nombre de diapositives par page et espacement en longueur CSS |
breakpoints | Orienté bureau d'abord : 1023: { perPage: 2 } s'applique jusqu'à 1023 px |
autoplay, interval, pauseOnHover | Lecture automatique |
focus: 'center' | Centre la diapositive active |
direction: 'ttb' + height | Slider vertical (une hauteur fixe est requise) |
drag: 'free' | Mode de défilement libre avec inertie |
Personnaliser le style de Splide
Importez splide.min.css (ou le CSS de base pour un contrôle total), puis redéfinissez .splide__arrow et .splide__pagination__page.is-active — le CSS généré le fait avec votre couleur d'accentuation.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Taille (JS, min + gzip) | ~40 Ko (bundle) | ~12 Ko | ~7 Ko | ~12 Ko + jQuery ~30 Ko |
| Dépendances | Aucune | Aucune | Aucune | jQuery |
| Effets | Glissement, fondu, cube, coverflow, flip, cards, creative | 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 en 2017) |
| Licence | MIT pour les quatre | |||
Aussi recherché comme : splide js, slider splide, carrousel splide, splide breakpoints, splide autoplay, splide cdn, carrousel accessible, générateur carrousel javascript.
Outils complémentaires : Générateur Splide
- 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 de slider Glide.js — Créez un carrousel Glide.js minimal, le slider sans dépendance d'environ 7 Ko, avec breakpoints responsives, flèches et pagination, puis copiez le code.
- Vérificateur de contraste — Saisissez une couleur de texte et une couleur de fond pour obtenir le ratio de contraste WCAG exact, la validation de chaque niveau, un score APCA et des corrections en un clic qui conservent votre teinte.
Questions fréquentes
Pourquoi le type fade n'affiche-t-il qu'une seule diapositive ?
Le type fade affiche toujours une seule diapositive par page. Utilisez le type slide ou loop pour afficher plusieurs diapositives.
Les breakpoints de Splide sont-ils en min-width ou en max-width ?
En max-width par défaut (orienté bureau d'abord). Définissez
mediaQuery: 'min' pour passer en orienté mobile d'abord.Splide est-il accessible ?
Oui — il applique par défaut les attributs ARIA, la navigation au clavier et les annonces pour lecteurs d'écran, ce qui constitue son principal atout.
Puis-je installer Générateur Splide en tant qu’application web et l’utiliser hors ligne ?
Oui. Générateur Splide 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.