no-code
web
Webdesign
Webflow

Créer un slider personnalisé dans Webflow avec Splide.JS

David Voge - 10.4.2024

Si vous développez sur Webflow depuis quelque temps, vous avez certainement remarqué que le composant "slider" intégré à Webflow est un peu rudimentaire. Il ne permet ni une intégration au design complexe ni un défilement automatique. Chez Petit Hack, nous nous sommes posé la question : Comment aller plus loin et créer un slider élégant sans contraintes d'intégration ?

Pour répondre à ce besoin, nous avons trouvé une superbe solution : Splide.js.

Splide.js, une librairie pas comme les autres

Connue dans le milieu du développement, Splide.js est une bibliothèque JavaScript qui permet rapidement de mettre en place un slider avec toutes les fonctionnalités nécessaires.

Splide.js met à disposition sa bibliothèque gratuitement, mais propose également une version payante pour explorer des animations plus avancées, notamment en ce qui concerne les textures. Aujourd'hui, nous allons découvrir ensemble cette bibliothèque afin que vous puissiez devenir des experts de l'intégration de sliders sur Webflow. C'est parti

Sans plus attendre, voici quelques exemples de nos confrères qui ont utilisé Splide pour leurs sliders dans Webflow :

Image de présentation d'un slider avec bouton flèche

Image de présentation d'un slider avec bar de navigation

Image de présentation d'un slider avec flèche et texte

Prise en main et connexion

Rendez-vous sur la page de Splide.js, puis cliquez sur "Get Started".

Dans votre projet Webflow, ouvrez les paramètres de votre page, puis dans la section 'before </body> tag', collez les deux liens CDN :

#1 - L'intégration CDN JavaScript

#2 - L'intégration CSS

Vous retrouverez les liens d'intégration ici.

Création du slider : HTML

Une fois intégré, nous pouvons passer à la conception de notre structure HTML dans Webflow. Pour chaque slider, vous devrez utiliser la même structure HTML :

présentation des sections HTML

La structure de nommage de classe obligatoire imposée par Splide est la suivante :

**> splide__track

> splide__list

> splide__slide**

(Vous pouvez bien sûr créer cette structure à l'aide d'une collection CMS.)

Voici chaque composant HTML :

Fonction du slider : JS

Il reste à mettre en place la fonction de votre slider. C'est dans cette fonction que nous allons coller dans la section 'before </body> tag' que nous pourrons configurer chaque option de notre animation.

Chaque fonction est composée d'options et de paramètres pour personnaliser votre slider. Rendez-vous dans la section "option" du site.

Pour l'exemple, nous allons prendre cette fonction :

var splide = new Splide( '.splide', {

type   : 'loop',

padding: '5rem',

} );

Remarque : Il est très important que le nom de la fonction soit identique au nom de la classe présente dans "splide__track

Le composant "Arrows" gère les flèches précédentes et suivantes. Si l'utilisateur ne fournit pas les flèches via le HTML, le composant les génère automatiquement.

Voici quelques options qui reviennent souvent dans chaque fonction :

  • pagination: 'slider', // 'slider' or false
  • speed : 600, // transition speed in miliseconds
  • type: 'loop', // 'loop' or 'slide'
  • gap: '2rem', // space between slides
  • arrows: false, // 'slider' or false

Vous pouvez également ajouter une pagination comme ceci :

présentation pagination slide

Pour ajouter une pagination, vous devez insérer un élément HTML : ul > li :

Pagination detail picture

Les fonctions du slider peuvent être multiples :

et bien d'autres encore sont disponibles sur le site de SplideJS.

Un slider responsive !

Slide JS offre également une configuration responsive grâce aux media queries, personnalisables directement dans la fonction de votre slider. Vous pouvez trouver plus d'informations dans la section Breakpoint dans Splide JS

Clonable et Resource

Voici le clonable réalisé par Petit Hack.

Voici aussi [une liste de projet webflow](https://webflow.com/made-in-webflow/popular?page=1&search=splide &utm_source=dashboard) de nos confrères qui utilise Splide.

Pour conclure

Chez Petit Hack, nous repoussons les limites du No-Code. Il arrive souvent que le slider par défaut de Webflow ne permette pas des intégrations complexes. Splide.js répond complètement à ce besoin graphique et d'intégration pour fournir un slider fluide, cohérent avec la maquette et responsive. À très vite chez Petit Hack pour une nouvelle pépite

David Voge