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 :
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 :
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 :
Pour ajouter une pagination, vous devez insérer un élément HTML : ul > li :
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 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