Slider Webflow : créer un carrousel natif ou relié au CMS

En bref : le composant Slider de Webflow gère les flèches, les points de navigation, le swipe mobile et l'autoplay sans une ligne de code. Sa limite : il ne se connecte pas directement à une collection CMS. Pour un carrousel de témoignages ou d'articles qui se met à jour seul, on passe par Finsweet Attributes (gratuit) ou par la librairie Swiper. Notre position : un slider en haut de page d'accueil sert rarement la conversion. Réservez-le aux témoignages, aux galeries et aux logos clients.

Comment fonctionne le slider natif de Webflow

Le Slider s'ajoute depuis le panneau Add du Designer. Il arrive avec quatre éléments imbriqués :

• Le masque (Mask), la fenêtre visible qui contient les slides.
• Les slides, un panneau par diapositive, dans lesquels on place texte, images ou boutons.
• Les flèches gauche et droite, qui sont des boutons : une icône personnalisée se place à l'intérieur.
• La navigation par points, qui affiche un état « courant » sur la slide active.

Les réglages se font dans le panneau Settings de l'élément : type d'animation (glissement ou fondu), courbe d'accélération, durée de la transition, défilement automatique avec son intervalle, et boucle infinie. Le swipe tactile fonctionne nativement sur mobile.

Créer un slider en 5 étapes

1. Ajoutez le Slider dans une section et donnez au masque 100 % de largeur, à tous les points de rupture.
2. Fixez une hauteur ou une hauteur minimale. Sans elle, des slides de hauteurs différentes font sauter la mise en page.
3. Remplissez chaque slide avec un conteneur flex ou grid, plutôt qu'avec des éléments posés en position absolue.
4. Réglez l'animation. Une transition courte et un easing doux suffisent. Coupez l'autoplay si les slides contiennent du texte à lire.
5. Vérifiez le responsive. Sur mobile, on masque souvent les flèches et on laisse le swipe. Notre guide responsive design Webflow détaille les points de rupture.

Si le même carrousel revient sur plusieurs pages, transformez-le en composant Webflow : une seule modification se répercute partout.

Relier un slider au CMS Webflow

C'est la question qui revient le plus. Le slider natif ne peut pas être alimenté par une collection du CMS Webflow : ses slides sont fixes et se remplissent à la main. Trois options existent.

Finsweet Attributes, la voie sans code

La solution List Slider de Finsweet transforme une Collection List en slider natif : chaque élément CMS devient une slide. On ajoute l'attribut fs-list-element="list" sur la Collection List, fs-list-element="slider" sur le Slider, et le script Attributes une seule fois dans le head de la page. C'est gratuit, et le slider garde tous ses réglages natifs.

Swiper.js, la voie sur mesure

Swiper est une librairie JavaScript très répandue. On construit une Collection List avec la structure attendue par Swiper, puis on l'initialise avec quelques lignes de code. On gagne ce que le slider natif ne fait pas bien : plusieurs slides visibles à la fois, défilement libre, comportements différents selon l'écran. Le code personnalisé demande un plan de site payant. Pour les animations plus poussées, voyez aussi notre article sur GSAP dans Webflow.

Accessibilité et performance

Un carrousel mal réglé gêne une partie des visiteurs et peut ralentir la page.

• L'autoplay doit pouvoir s'arrêter. Les règles WCAG demandent qu'un contenu qui défile seul plus de 5 secondes puisse être mis en pause. Sans bouton pause, coupez l'autoplay.
• Les flèches ont besoin d'un libellé. Ajoutez un aria-label explicite (« Slide suivante ») via les attributs personnalisés.
• Les mouvements se réduisent. Respectez le réglage « réduire les animations » du système, surtout pour les transitions longues. Notre guide accessibilité web détaille les obligations.
• Les images se compressent. Chaque slide ajoute ses images au poids de la page. Un carrousel de 8 visuels lourds pèse sur le temps de chargement.
• Le haut de page reste léger. Si la première slide est l'élément le plus visible à l'écran, elle détermine votre LCP, l'un des Core Web Vitals.

Faut-il vraiment un slider ?

Souvent, non. En haut de page, rien ne garantit que le visiteur verra la deuxième slide, et un message qui change toutes les quelques secondes se lit mal. Une promesse claire, une preuve et un bouton font mieux le travail.

Le slider garde tout son intérêt dans trois cas : les témoignages clients, les galeries de réalisations et les murs de logos. Pour donner du mouvement sans carrousel, les animations Webflow au scroll sont souvent une meilleure option.

Par où commencer

• Pour 3 à 5 éléments fixes, le slider natif suffit. Fixez une hauteur et coupez l'autoplay sur les slides de texte.
• Pour un carrousel relié au CMS, commencez par Finsweet List Slider. Passez à Swiper si vous avez besoin de plusieurs slides visibles.
• Vérifiez l'accessibilité et le poids des images avant de publier.

Vous préférez qu'une équipe conçoive des composants propres et réutilisables pour tout votre site ? Voyez comment travaille notre équipe Webflow.