Générateur de carrousel (slider) avec CSS scroll-snap

Générateur de carrousel (slider) avec CSS scroll-snap: à quoi ça sert

Les carrousels de photos ou de cartes sont courants sur les sites de commerce, mais les bibliothèques de slider sont lourdes et bloquent parfois le défilement sur mobile.

Ce générateur utilise le scroll-snap du CSS, qui cale chaque élément grâce au défilement natif du navigateur : le glissement au doigt est fluide, fonctionne avec le trackpad et le clavier et il n’y a presque pas de JavaScript. Choisissez combien d’éléments apparaissent à la fois sur ordinateur et sur mobile (y compris un et un morceau du suivant, pour montrer qu’on peut glisser), l’espace et les coins. Pas de rotation automatique, qui gêne la lecture et l’accessibilité (WCAG 2.2.2).

Mode d’emploi

1. Collez les adresses des images.
2. Choisissez combien apparaissent à la fois et l’espacement.
3. Copiez le code et collez-le dans le site.

Quand l’utiliser

• Vitrine de produits.
• Photos de réalisations et portfolio.
• Cartes de témoignages ou de services.

Questions fréquentes

Pourquoi scroll-snap et pas une bibliothèque ?

Scroll-snap utilise le défilement natif du navigateur : le glissement sur mobile est fluide comme sur Instagram, fonctionne avec le trackpad et le clavier et ne pèse rien. Les bibliothèques de slider ajoutent souvent des dizaines de Ko de JavaScript pour faire la même chose.

Le carrousel défile-t-il tout seul ?

Non, volontairement. Un carrousel qui tourne seul gêne la lecture et pose un problème d’accessibilité (WCAG 2.2.2 exige de pouvoir mettre en pause ce qui bouge plus de 5 secondes). Pour en voir plus, on glisse ou on utilise les flèches.

Peut-on l’utiliser avec des cartes de texte ?

Oui. Remplacez les images par n’importe quel contenu dans chaque élément de la liste ; la taille et l’alignement restent les mêmes.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires