Splide est une bibliothèque JavaScript libre qui crée des carrousels, aussi appelés sliders. Elle est légère, écrite sans dépendance, et pose d'elle-même ce qu'il faut pour l'accessibilité : libellés, navigation au clavier, pause au survol.

Splide est-il gratuit ?

Oui. Splide est libre et gratuit, sous licence MIT, y compris pour un site commercial. Ses extensions officielles, comme le défilement continu (AutoScroll), la vidéo ou la grille, le sont aussi.

Les deux sont libres et sérieux. Swiper propose plus d'effets prêts à l'emploi (cube, cartes empilées, défilement en 3D). Splide est plus léger, sans dépendance, et pose l'accessibilité tout seul : c'est ce qui nous suffit pour la grande majorité des carrousels de site.

Splide fonctionne-t-il avec Webflow ?

Oui. On pose les classes de Splide sur les éléments, y compris sur une liste du CMS de Webflow, et un script monte le carrousel au chargement de la page. Chez nous, ce script vit dans un fichier Slater, le même pour tous les carrousels du site.

Oui, Splide se charge dans les fichiers du thème d'une boutique Shopify. C'est le cas sur la boutique de Maison Charmeilles, dont les carrousels passent par un script Splide du thème.

Un carrousel est-il toujours une bonne idée ?

Non. Un carrousel cache une partie du contenu et beaucoup de visiteurs ne vont pas plus loin que la première carte. On le réserve aux contenus qu'on parcourt volontiers, réalisations, avis, produits, avec une carte suivante visible au bord pour inviter à glisser.

Splide ralentit-il le site ?

Très peu : c'est l'une des bibliothèques de carrousel les plus légères, sans dépendance. Le plus lourd reste ce qu'on y met, images et vidéos, qu'on optimise et qu'on charge au moment où elles deviennent visibles.

Où voir vos carrousels Splide ?

Sur Paris Antoinette, les visites se parcourent en carrousels ; sur Kooleurs, chaque famille de produits a le sien ; sur MonMariageDigital, deux bandeaux défilent en sens inverse.

SplideNos carrousels

À quoi sert Splide : carrousels et sliders pour un siteVos contenus défilent, au doigt et à la souris.

Q: À quoi sert Splide ?

À faire défiler plusieurs contenus dans un même espace : des réalisations, des avis, des produits, des logos de partenaires. On les parcourt au doigt sur téléphone, à la souris ou au clavier au bureau, ou on les laisse défiler seuls dans un bandeau continu.

Splide est une bibliothèque JavaScript libre et gratuite qui crée des carrousels légers et accessibles. On s'en sert sur la plupart de nos sites Webflow : réalisations, avis, produits ou logos de partenaires, qui glissent au doigt sur téléphone et défilent seuls quand il le faut.

On se parle ?

Voir nos sites

Carrousel · Réalisations· 5 diapositives

Maisons SapinièreNos réalisations

Extension boisObernai

Séjour sous charpenteColmar

Maison familialeSélestat

Carport en boisHaguenau

Maison sur penteMolsheim

Options du carrouselréglées une fois, pour tout le site

type"loop"

perPage3 · 1 sur téléphone

dragtrue

autoplay

new Splide(".splide", options) .mount();

Nos réalisations avec des carrousels Splide

Des contenus qui glissent,
sans rien cacher.

Toutes nos réalisations

50visites thématiques structurées

Site WebflowParis

Paris Antoinette

Une refonte Webflow pour une plateforme de visites guidées à Paris.

Les visites se parcourent en carrousels Splide, sorties scolaires comprises : une carte par visite, qui glisse au doigt sur téléphone.

33pages produit conçues

Site Webflow

Kooleurs

Une création Webflow pour un atelier de personnalisation textile.

Un carrousel Splide par famille de produits, coupe-vent, tabliers, catégories : le catalogue se feuillette sans quitter la page.

55pages conçues

Site WebflowAlsace

O'KTAV Prod

Une refonte Webflow pour une société alsacienne de production de spectacle vivant.

Les artistes défilent dans un carrousel Splide, monté par un fichier du projet Slater du site, comme sur nos sites récents.

6thèmes de faire-part conçus

Site Webflow

MonMariageDigital

Une création Webflow pour une marque de faire-part de mariage digitaux et interactifs.

Deux bandeaux en lecture automatique : les designs dans un sens, les retours clients dans l'autre, sans saccade.

94produits référencés

Site WebflowPartout en France

Roger AUTAA

Un site Webflow pour un réseau de menuiserie présent partout en France.

Les logos des partenaires défilent seuls dans un bandeau Splide en lecture automatique, monté par le projet Slater du site.

Votre projet ?

Et vous ?

Votre projet commence ici.

Un site à créer, à refaire ou à faire évoluer : parlez-nous de votre activité, on vous dit par où commencer.

Voir le projet

À quoi sert Splide

Glisser, boucler,
défiler seul.

Splide transforme une simple liste d'éléments en carrousel : il gère le glissement au doigt, les flèches, la pagination, la boucle et l'accessibilité, sans dépendre d'aucune autre bibliothèque.

Une liste devient carrousel

On pose une liste d'éléments, Splide la range en diapositives avec flèches et pagination. Le contenu reste un HTML simple et lisible.

Au doigt comme à la souris

Sur téléphone, on fait glisser au doigt ; au bureau, à la souris ou au clavier. Le nombre de cartes s'adapte à la largeur de l'écran.

Accessible d'office

Libellés pour les lecteurs d'écran, navigation au clavier, pause au survol : Splide pose lui-même les attributs d'accessibilité.

En défilement continu

Avec son extension AutoScroll, un bandeau de logos ou d'avis défile en continu et s'arrête quand le visiteur le survole.

Chez nous : des bandeaux qui défilent

Splide ou un autre outil ?

Un carrousel n'est pas
toujours la réponse.

Un carrousel cache une partie du contenu : on le pose quand il aide vraiment à parcourir. Pour le reste, on vous dit ce qui se lit mieux.

Nos carrousels

Splide, si…

Vous avez plus de contenus que de place : réalisations, avis, produits, partenaires.
Vos visiteurs sont surtout sur téléphone et doivent pouvoir faire glisser au doigt.
Vous voulez un carrousel léger, qui ne charge pas une grosse bibliothèque pour trois cartes.
Un bandeau doit défiler seul en continu, logos ou avis, sans saccade.

Les alternatives

Plutôt un autre outil, si…

Trois ou quatre éléments seulement : une grille simple se lit mieux qu'un carrousel qui en cache la moitié.
Une animation liée au défilement de la page : c'est le terrain de GSAP, intégré à Webflow.
Vos avis Google ou votre Instagram, à jour tout seuls : un widget Elfsight les récupère pour vous.
Une vidéo de présentation plutôt qu'une suite d'images : Wistia l'héberge et la lit proprement.

Notre avis sur Elfsight

Vous hésitez ? Montrez-nous ce que vous voulez afficher : on vous dit si un carrousel le met en valeur, ou s'il le cache.

Notre avis sur Slater

De la collection au carrousel

Une collection,
un carrousel qui glisse.

L'usage le plus courant de Splide sur un site Webflow : une liste de réalisations, d'avis ou de produits tirée du CMS de Webflow, transformée en carrousel par Splide. Une fiche ajoutée, une diapositive de plus apparaît, sans toucher au carrousel.

Comment on le monte

La liste vient du CMS
On pose les classes
On règle les options
Le carrousel glisse

Parler de mon site

Collection Réalisations· CMS du site

PhotoNomVilleStatut

Maison sur penteMolsheimPubliée

Extension boisObernaiPubliée

Séjour sous charpenteColmarPubliée

Maison familialeSélestatPubliée

+ Nouvelle réalisation

Section Réalisations.splide

Liste du CMS.splide__track

Éléments.splide__listCollection Réalisations

Carte.splide__slide× 5

Photo, nom, ville

Le fichier Splide du projet Slater trouve la section et monte le carrousel.

BureauTéléphone

perPage31

padding.right0"18%"

arrowstruefalse

paginationtruetrue

dragtruetrue

Aperçu

Maisons SapinièreMaisons · Réalisations · Contact

Nos réalisations

Maison sur pente · Molsheim

Extension bois · Obernai

Séjour sous charpente · Colmar

Maison familiale · Sélestat

Carrousel Splide

Un cas concret

Un carrousel d'avis
sur un site Webflow.

Exemple type : une entreprise veut montrer ses avis clients en carrousel, qui glisse au doigt sur téléphone et défile seul au bureau. Voici les quatre étapes, de la liste au carrousel publié.