Guide Splide JS : créez des sliders avancés avec facilité dans Webflow

Introduction

Quand il s'agit de créer des sliders dans Webflow, la plupart des utilisateurs ont rapidement fait face à une réalité frustrante : les options natives pour les sliders sont très limitées. La création de sliders avancés dans Webflow s'avère être un petit défi en soi, notamment si la donnée doit être sourcée depuis le CMS.

Certaines alternatives existent, comme la création de sliders grâce aux attributs de Finsweet, mais elles ne sont (pour l’instant) pas toujours assez fluides et avancées pour répondre aux besoins spécifiques de votre projet.

C'est là que Splide JS entre en jeu. Cette bibliothèque JavaScript permet de créer des sliders beaucoup plus avancées et personnalisables grâce à un peu de code personnalisé.

Dans cet article, on va vous présenter Splide JS et vous montrer comment l'intégrer à vos projets Webflow pour créer des sliders plus personnalisés, en intégrant même si nécessaire des collections CMS. Préparez-vous à découvrir comment améliorer vos sliders Webflow avec Splide JS. C’est parti !

C’est quoi Splide JS ?

« Bon, déjà, c’est quoi Splide JS ? »

Splide JS est une bibliothèque JavaScript légère et flexible conçue spécifiquement pour la création de sliders. Elle est développée avec la simplicité et la performance à l'esprit, c’est donc une option de choix pour les développeurs en quête de solutions polyvalentes, plus avancées et plus personnalisables.

Mais pourquoi devriez-vous envisager de l'utiliser dans vos projets Webflow ? Faisons le tour des points clés :

• Simplicité d'utilisation : Même s’il nécessite du code personnalisé, Splide JS est conçu pour être intuitif, même si vous n’êtes pas expert en développement JavaScript. Son API simple et bien documentée facilite la mise en place rapide de sliders fonctionnels.
• Personnalisation flexible : Splide JS est aussi très personnalisable. Vous pouvez ajuster presque tous les aspects de votre slider, du nombre d'éléments affichés à la vitesse de transition, en passant par les effets de transition ou de défilement automatique.
• Performance optimisée : Splide JS est soucieux des performances. Il est léger et garantit une expérience fluide aux utilisateurs, même sur les appareils mobiles.
• Accessibilité : La bibliothèque prend en charge l'accessibilité web, ce qui signifie que vos sliders resteront utilisables pour tous les visiteurs, y compris ceux qui utilisent des lecteurs d'écran.
• Compatibilité avec Webflow : Splide JS peut être intégré sans problème dans vos projets Webflow avec un peu de code personnalisé, ce qui en fait une option idéale pour améliorer vos sliders existants ou en créer de nouveaux avec une plus grande flexibilité.

Dans les sections suivantes de cet article, on explore en détail comment tirer parti de Splide JS pour créer des sliders avancés dans Webflow. Vous découvrirez comment l'installer, le configurer et le personnaliser pour répondre à vos besoins spécifiques.

1. Configuration de Splide JS

Mais avant de plonger dans la personnalisation avancée de Splide JS, voyons comment l’intégrer facilement dans Webflow. Suivez ces étapes pour démarrer rapidement :

Étape 1 : Intégration de Splide JS

La première étape consiste à intégrer la bibliothèque Splide JS dans votre projet Webflow. Pour ce faire, copiez-collez les snippets suivants dans le code personnalisé de votre page (ou de votre site).

• Collez le code suivant dans le head :

<!--- Splide JS styles --->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/css/splide-core.min.css" integrity="sha512-cSogJ0h5p3lhb//GYQRKsQAiwRku2tKOw/Rgvba47vg0+iOFrQ94iQbmAvRPF5+qkF8+gT7XBct233jFg1cBaQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

• Collez le code suivant dans le footer :

<!--- Splide JS import --->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<!--- Importer Splide JS Autoscroll--->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>

Étape 2 : Structure HTML requise

Pour que Splide JS fonctionne, vous devrez créer une structure HTML bien spécifique pour votre slider dans votre projet Webflow :

<div class="splide">
  <div class="splide__track">
    <div class="splide__list">
      <div class="splide__slide">Contenu de la slide 1</div>
      <div class="splide__slide">Contenu de la slide 2</div>
      <div class="splide__slide">Contenu de la slide 3</div>
    </div>
  </div>
</div>

L’un des gros avantages de Splide JS par rapport aux sliders natifs de Webflow est que vous pouvez facilement créer des sliders à partir de collections CMS. Pour ce faire, ajouter une collection à l’intérieur d’un Div Block avec une classe “splide” et appliquez le reste de la structure aux éléments de la collection CMS :

• Collection List Wrapper = splide__track
• Collection List = splide__list
• Collection Item = splide__slide

Attention : le nom de chaque classe contient deux symboles “_” à la suite.

Étape 3 : Personnalisation des styles

Une fois que la structure est en place, personnalisez les styles de votre slider.

Si vous souhaitez gérer plusieurs sliders avec Splide JS dans votre projet, ajoutez une combo class aux élément Splide pour chaque slider avant de les styliser. De cette façon, les styles appliqués seront spécifiques au slider correspondant (et pas communs à tous les sliders gérés par Splide).

Par exemple, ajoutez une combo class “is-team” à tous les éléments Splide du slider Team :

<div class="splide is-team">
  <div class="splide__track is-team">
    <div class="splide__list is-team">
      <div class="splide__slide is-team">Contenu de la slide 1</div>
      <div class="splide__slide is-team">Contenu de la slide 2</div>
      <div class="splide__slide is-team">Contenu de la slide 3</div>
    </div>
  </div>
</div>

Dans cet exemple, vous pourrez donc styliser spécifiquement les éléments du slider Team (du fait que chacun ait sa propre combo class) en laissant vierges les classes CSS requises par Splide.

Important : Notez que le gap entre les slides sera géré dans les paramètres Splide JS (qu’on aborde dans une minute). Pas besoin de les personnaliser dans les styles Webflow, donc.

Étape 4 : Initialisation de Splide JS

Enfin, une fois que vous avez intégré Splide JS, créé la structure HTML et personnalisé les styles de base, vous pouvez initialiser votre slider. Pour ce faire, collez le code JavaScript suivant dans le code personnalisé du footer de votre page :

<script>
// Splide Team

function splideTeam() {
  // Cible le composant grâce à ses classes 
  let splides = $('.splide.is-team'); 
  for ( let i = 0, splideLength = splides.length; i < splideLength; i++ ) {
    // Ouvre les paramètres du slider
    new Splide( splides[ i ], {
      // Personnalisez les options souhaitées ici
    }).mount();
  }
}
splideTeam();

</script>

Pensez simplement à adapter le code en fonction du slider que vous voulez créer :

• ajoutez un commentaire avant le code pour préciser de quel slider il s’agit (1),
• changez le nom de la fonction pour préciser quel slider est ciblé (2, 3),
• modifiez la combo class pour cibler le bon élément (4).

Félicitations ! Vous avez désormais un slider Splide JS, basique mais fonctionnel, dans votre projet Webflow. Cependant, il ne s'agit que du début. Dans la section suivante, on plonge plus profondément dans la personnalisation et les fonctionnalités avancées de Splide JS pour créer des sliders qui répondront vraiment à vos besoins.

Personnalisation avancée de Splide JS

Maintenant que vous avez effectué la configuration de base de votre slider Splide JS, explorons les fonctionnalités avancées qui vous permettront de le rendre complètement personnalisé.

Une fois le slider initialisé, vous pouvez le personnaliser en ajoutant les options souhaitées dans les paramètres de votre code (à l’emplacement suivant) :

// Ouvre les paramètres du slider
new Splide( splides[ i ], {
  // Personnalisez les options souhaitées ici
}).mount();

Voici un exemple de configuration :

// Ouvre les paramètres du slider
new Splide( splides[ i ], {
  // Personnalisez les options souhaitées ici
  type: 'loop',
  gap: '4rem', 
  autoWidth: true,
  arrows: false,
  pagination: false,
  drag: true
}).mount();

Il existe plus d’une soixantaine d’options (vous pouvez les retrouver dans la documentation ici), alors faisons le tour des plus utiles :

L’option “type”

type: 'slide' // type: 'loop' // type: 'fade'

Cette option définit le type de slider :

• ‘slide’ (valeur par défaut) : un slider avec une transition classique de slide,
• ‘loop’ : un slider avec une transition classique de slide et un effet de boucle (une fois à la dernière slide, les premières viennent se remettre à la suite pour un défilement infini),
• ‘fade’ : un slider avec une transition en fondu.

L’option “gap”

gap: '2rem' // gap: '32px'

Cette option définit tout simplement l’espace entre les slides.

L’option “speed”

speed: 400

Cette option définit simplement la vitesse de transition entre les slides (en millisecondes).

L’option “autoWidth”

autoWidth: true // autoWidth: false

Cette option définit comment sera déterminée la largeur de chaque slide.

• ‘true’ : la largeur des slides est déterminée en fonction des styles appliqués dans le Designer.
• ‘false’ (valeur par défaut) : la largeur des slides est déterminée en fonction de l’option “perPage” (expliquée en dessous).

L’option “perPage”

perPage: 3

Cette option définit le nombre de slides qui seront affichées à l’écran (l’option autoWidth ne doit pas être définie en ‘true’ pour ne pas causer de conflit).

L’option “breakpoints”

breakpoints: {
  991: {
    perPage: 2
  }
}

Cette option permet de personnaliser les autres options du slider pour différentes tailles d’écran. Dans cet exemple, le nombre de slides par page passe à 2 sur tablette (991px et moins).

L’option “pagination”

pagination: true // pagination: false

Cette option détermine si une navigation (les points indicateurs) sera créée (valeur par défaut : ‘true’) ou non. Pour découvrir comment créer une navigation personnalisée, découvrez la vidéo de Timothy Ricks sur le sujet (en anglais).

L’option “arrows”

arrows: true // arrows: false

Cette option détermine si des flèches de navigation seront créées (valeur par défaut : ‘true’) ou non. Pour découvrir comment créer des flèches personnalisées, découvrez la vidéo de Timothy Ricks sur le sujet (en anglais).

L’option “autoplay”

autoplay: false // autoplay: true

Cette option détermine si les slides se passeront de façon automatique ou non (valeur par défaut : ‘false’).

L’option “autoScroll”

Cette option, un peu plus avancée, nécessite d’importer un plug-in supplémentaire. Pour ce faire, collez simplement le code suivant dans le footer, juste après l’importation initiale de Splide :

<!--- Splide JS autoscroll --->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>

Cette option permet de faire défiler le slider de façon automatique et infinie. Cette fonctionnalité peut être très utile pour un slider de logos par exemple.

autoScroll: {
  speed: 2
},

Si elle est utilisée, vous devrez aussi monter l’extension juste après que toutes les options aient été paramétrées. Pour ce faire, repérez la ligne suivante à la fin de votre code :

}).mount();

Remplacez cette ligne avec le code ci-dessous :

}).mount( window.splide.Extensions );

Exemple de code personnalisé final

En guise de référence, voici à quoi le code final du footer devrait ressembler :

<!--- Splide JS script --->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<!--- Splide JS autoscroll --->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>
<script>
// Splide : Team

function splideTeam() { 
  // Cible le composant grâce à ses classes 
  let splides = $('.splide.is-team'); 
  for ( let i = 0, splideLength = splides.length; i < splideLength; i++ ) {
    // Ouvre les paramètres du slider
    new Splide( splides[ i ], {
      // Personnalisez les options souhaitées ici
      type: 'loop',
      gap: '1rem', 
      autoWidth: true,
      arrows: false,
      pagination: false,
      drag: true,
      autoScroll: {
        speed: 2
      }
    }).mount( window.splide.Extensions );
  }
}
splideTeam();

</script>

Conclusion

Félicitations ! Vous avez maintenant exploré les méandres de Splide JS et découvert comment cette bibliothèque légère peut rendre vos sliders Webflow plus puissants et personnalisables. Avant de clore cette escapade dans le monde du développement web, faisons un bref récapitulatif.

Mais nous n’avons exploré qu’une partie de ce que Splide JS permet. Creusez la documentation, expérimentez et personnalisez vos sliders pour qu'il s'intègre au mieux dans chaque recoin de vos projet Webflow !

Pour aller plus loin, découvrez les articles suivants :

• Comment créer un défilement infini (infinite marquee) de logos dans Webflow
• 7 codes personnalisés CSS utiles pour améliorer vos projets Webflow
• Webflow Localization : le guide ultime pour traduire et localiser votre site Webflow