Comment utiliser : Générateur Swiper Slider
- Choisissez les options de votre slider Swiper et le contenu des slides : panneaux de démonstration, vos propres URL d'images ou des cartes.
- Définissez le nombre de slides par vue pour le bureau, la tablette et le mobile, ainsi que l'espacement, l'effet, la boucle, l'autoplay, les flèches et la pagination.
- Vérifiez l'aperçu en direct aux 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 Swiper
Swiper est le slider tactile le plus utilisé sur le web : sans framework, accéléré par le matériel et riche en modules (navigation, pagination, autoplay, clavier, molette de souris, mode libre, chargement différé, accessibilité et sept effets de transition). La version 11 est livrée en un seul bundle pour un usage via CDN, ou en modules ES depuis npm.
Options principales générées par cet outil
| Option | Rôle |
|---|---|
slidesPerView + breakpoints | Nombre de slides visibles simultanément ; les breakpoints sont mobile-first (768: { slidesPerView: 2 } s'applique à partir de 768 px) |
spaceBetween | Espacement entre les slides en px |
loop | Boucle infinie ; Swiper 11 nécessite au moins slidesPerView × 2 slides pour une boucle fluide |
autoplay | delay, pauseOnMouseEnter et disableOnInteraction: false pour que la lecture automatique reprenne après un balayage |
effect | fade (avec crossFade), cube, coverflow, flip, cards, creative |
pagination.type | bullets, fraction ou progressbar |
Style
Swiper lit la variable CSS --swiper-theme-color pour les flèches et les points actifs ; la couleur d'accentuation choisie y est écrite. D'autres variables sont disponibles, comme --swiper-navigation-size et --swiper-pagination-bullet-size.
Utilisation avec npm et les frameworks
Passez l'option d'installation sur npm pour obtenir import Swiper from 'swiper/bundle'. Avec React, Vue ou Svelte, vous pouvez utiliser Swiper Element (web components) ou les composants React officiels, avec les mêmes options sous forme de props.
| 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 | Slide, fade, cube, coverflow, flip, cards, creative | Slide, fade | Slide | Slide, fade |
| 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 : générateur slider swiper, swiper js générateur, carrousel swiper exemple, swiper breakpoints responsive, swiper autoplay, swiper cdn, swiper coverflow, slider swiper code.
Outils complémentaires : Générateur Swiper 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 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.
- 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.
- Outil de redimensionnement d’images — Redimensionnez une photo selon des dimensions précises en pixels ou un pourcentage, recadrez-la pour l'adapter au format des réseaux sociaux, ou insérez-la dans un cadre avec une couleur d'arrière-plan — le tout directement dans votre navigateur.
Questions fréquentes
Pourquoi la boucle de Swiper ne fonctionne-t-elle pas ?
slidesPerView.Comment fonctionnent les breakpoints de Swiper ?
Comment changer la couleur des flèches ?
--swiper-theme-color sur le slider (la couleur d'accentuation le fait automatiquement), ou stylez .swiper-button-next et .swiper-button-prev.