Comment utiliser : Générateur Slick Slider
- Choisissez les options de votre slider Slick et 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.
À propos de Slick
Slick (« le dernier carrousel dont vous aurez besoin ») a longtemps été le carrousel jQuery par défaut. Il est encore intégré à de nombreux thèmes WordPress, boutiques Shopify et sites anciens. Il prend en charge les points de rupture responsive, le mode centré, le fondu, le défilement vertical, le chargement différé et la lecture automatique. Sa dernière version (1.8.1) date de 2017 et il nécessite jQuery.
Options de Slick
| Option | Signification |
|---|---|
slidesToShow / slidesToScroll | Diapositives visibles et nombre de diapositives déplacées à chaque clic |
responsive | Tableau de { breakpoint, settings } ; chaque réglage s'applique en dessous de la largeur du point de rupture |
infinite | Boucler les diapositives |
autoplay, autoplaySpeed | Lecture automatique et délai |
fade | Fondu enchaîné (une diapositive à la fois) |
centerMode | Centre la diapositive active avec des voisines partiellement visibles |
Espacement entre les diapositives
Slick n'a pas d'option d'espacement. Le CSS généré ajoute une marge horizontale à .slick-slide et une marge négative à .slick-list pour que les bords extérieurs restent alignés.
Faut-il encore utiliser Slick ?
Pour un site existant qui charge déjà jQuery et Slick, il est raisonnable de conserver la cohérence. Pour tout nouveau projet, Swiper ou Splide sont plus légers, maintenus, plus accessibles et ne nécessitent pas jQuery. Changez de bibliothèque ci-dessus et le générateur convertit vos réglages.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Taille (minifiée + 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 | |||
Aussi recherché comme : slick slider, carrousel slick, exemple slick slider, slick responsive, slick autoplay, carrousel jquery, slick cdn.
Outils complémentaires : Générateur Slick Slider
- 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.
- É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.
Questions fréquentes
Slick nécessite-t-il jQuery ?
Comment ajouter de l'espace entre les diapositives Slick ?
.slick-slide et une marge négative correspondante sur .slick-list ; le générateur les écrit à partir de la valeur d'espacement.