Comment utiliser : Générateur de slider et carrousel
- Choisissez une bibliothèque — Swiper, Splide, Glide.js ou Slick — puis le contenu des diapositives : panneaux de démonstration, vos propres URL d'images ou des 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 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.
Générer des sliders sans mémoriser les options
Chaque bibliothèque de carrousel propose des dizaines d'options aux noms différents : slidesPerView de Swiper correspond à perPage chez Splide, à perView chez Glide et à slidesToShow chez Slick. Ce générateur vous offre un seul jeu de commandes et écrit la configuration correcte pour la bibliothèque choisie, y compris les points de rupture responsive, que chaque bibliothèque définit différemment (Swiper utilise min-width en approche mobile-first, Splide et Glide utilisent max-width en approche desktop-first, et Slick un tableau responsive).
Quelle bibliothèque de slider utiliser ?
| 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éatifs | 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 | |||
Swiper est le choix le plus populaire et le plus complet : utilisez-le sauf si vous avez besoin de quelque chose de très léger. Splide est plus léger et offre la meilleure accessibilité par défaut. Glide.js est le plus petit pour des carrousels simples. Slick reste courant sur les anciens sites et les thèmes WordPress, mais il dépend de jQuery et n'est plus maintenu : ne le choisissez que pour rester cohérent avec un projet existant.
Conseils de performance et d'accessibilité
- Chargez en différé les images situées après la première diapositive (
loading="lazy"est ajouté automatiquement) et dimensionnez-les selon la largeur de la diapositive : le redimensionneur d'images et le compresseur peuvent vous aider. - Évitez la lecture automatique pour les contenus importants ; si vous l'utilisez, gardez pause au survol activé et un délai d'au moins 4 secondes.
- Gardez les flèches et la pagination activées pour que les utilisateurs au clavier et les lecteurs d'écran puissent naviguer.
- Les carrousels situés dans la première fenêtre peuvent nuire au Largest Contentful Paint : assurez-vous que la première image n'est pas chargée en différé si elle constitue votre élément LCP.
Guides spécifiques à chaque bibliothèque : Swiper, Splide, Glide.js et Slick. Pour Webflow, collez le HTML dans un élément Embed et le script avant </body>.
Aussi recherché comme : générateur de carrousel, générateur de slider d'images, générateur de code slider, slider responsive, créateur de carrousel, slider html, carrousel javascript.
Outils complémentaires : Générateur de slider et carrousel
- Éditeur HTML en ligne — Un bac à sable de code léger : modifiez HTML, CSS et JavaScript côte à côte, voyez le résultat instantanément, consultez la console et téléchargez votre page dans un seul fichier HTML.
- Générateur de dégradé CSS — Concevez un dégradé visuellement : faites glisser les arrêts de couleur, modifiez l’angle ou le type, partez d’un préréglage, puis copiez un CSS prêt pour la production avec une couleur de repli unie.
- Générateur d’animation CSS — Concevez vos animations CSS sur une vraie timeline de keyframes.
- Générateur Keyframes CSS — Un éditeur visuel pour @keyframes.
Questions fréquentes
Quelle est la meilleure bibliothèque de slider ?
Puis-je utiliser le code dans WordPress ou Webflow ?
</body>.