Chapitre 810 | Intégrer une bibliothèque externe (slider d’images)

Ce que l’on va construire

Ce chapitre est une construction guidée. L’objectif n’est pas d’écrire du code entièrement à la main, mais d’apprendre à intégrer une brique déjà construite par quelqu’un d’autre — une compétence tout aussi importante que savoir coder soi-même.

Le résultat final, en langage naturel : une page avec un titre, puis un slider (carrousel d’images) contenant 4 images. Une seule image est visible à la fois, avec des flèches pour naviguer et des petits points en dessous indiquant l’image actuelle. Une fois arrivé à la dernière image, on revient à la première (défilement en boucle).

Pourquoi utiliser une solution externe ?

Un slider fluide, avec navigation tactile, gestion du clavier, accessibilité pour les lecteurs d’écran… représente beaucoup de code technique. Plutôt que de tout réécrire depuis zéro, une pratique très courante du développement web consiste à utiliser une bibliothèque : un ensemble de fichiers CSS et JavaScript déjà écrits, testés, et mis à disposition gratuitement par d’autres développeurs, qu’on vient simplement brancher dans sa propre page.

Comment on la « branche », concrètement : ces fichiers sont hébergés sur un CDN (Content Delivery Network — un réseau de serveurs répartis dans le monde, spécialisés dans la mise à disposition rapide de fichiers). Au lieu de télécharger la bibliothèque et de gérer ses fichiers vous-même, vous ajoutez simplement un <link> et un <script> pointant vers une URL du CDN — exactement le même principe que Google Fonts, déjà vu au chapitre 160.

Pour ce chapitre, on utilise la bibliothèque Splide, un slider léger, sans dépendance, avec un site officiel bien documenté : splidejs.com.

Splide n’est pas la seule bibliothèque de ce type — il en existe plusieurs, parmi lesquelles :

Swiper — probablement la plus utilisée, très riche en fonctionnalités
Glide.js — comparable à Splide en légèreté, sans dépendance
tiny-slider — autre option légère, également sans dépendance
Slick — plus ancienne et historiquement très populaire, mais elle dépend de jQuery, une autre bibliothèque JavaScript : ça impose de charger un fichier supplémentaire (jQuery lui-même) en plus du slider, donc plus de code total à faire fonctionner sur la page

Splide est choisi dans ce cours parce qu’il ne demande aucune dépendance de ce genre — juste ses deux fichiers (CSS et JS), rien de plus.

Bon réflexe à prendre : avant d’utiliser un outil externe, on consulte toujours sa documentation officielle — pas un tutoriel tiers qui peut être obsolète ou imprécis. Tout au long de ce chapitre, chaque affirmation technique sera accompagnée de l’adresse exacte de la page de documentation Splide qui la confirme.

Vue d’ensemble avant de commencer

Avant de dérouler la procédure étape par étape, voici la logique d’ensemble à garder en tête — une sorte de boussole à laquelle vous référer si vous perdez le fil pendant la construction.

Pour utiliser la bibliothèque Splide, il faut charger deux fichiers différents, qui jouent chacun un rôle précis :

Un fichier JavaScript — le « moteur » du slider, qui contient tout son comportement (faire défiler les images, écouter les clics sur les flèches, etc.)
Un fichier CSS — le style visuel du slider (apparence des flèches, des points, des transitions)

La convention HTML impose où placer chacun de ces deux fichiers (la même règle que vous connaissez déjà depuis les chapitres 35 et 160) :

Le CSS se charge dans le <head>
Le JavaScript se charge dans le <body>

Une fois ces deux fichiers chargés, il reste une étape obligatoire : rien ne se passe encore, tant qu’on ne donne pas l’ordre à la bibliothèque de démarrer. Cet ordre passe par un script d’activation, que l’on écrit nous-mêmes — et qui se trouve, lui aussi, dans le <body>.

On se retrouve donc avec cette répartition :

Dans le <head> : un seul appel (le CSS de la bibliothèque)
Dans le <body> : deux éléments — l’appel au JavaScript de la bibliothèque, puis le script d’activation

Enfin, pour régler le comportement du slider (défilement en boucle, vitesse, flèches…), deux méthodes existent, comme vous le verrez plus loin : passer ces réglages en HTML (dans un attribut), ou les passer en JavaScript (dans le script d’activation).

Si on choisit HTML : le script d’activation reste seul, sans réglage à l’intérieur — aucun script supplémentaire n’est nécessaire.
Si on choisit JavaScript : les réglages viennent s’ajouter directement à l’intérieur du script d’activation — toujours ce même script, pas un nouveau.

Dans les deux cas, ces réglages restent dans le <body>, jamais dans le <head>.

Étape 1 : Charger la bibliothèque

Dans le <head>, on charge le CSS de Splide depuis le CDN :

<!-- CSS de Splide, chargé depuis le CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">

Et juste avant </body>, on charge le JavaScript de Splide, de la même façon :

<!-- JavaScript de Splide, chargé depuis le CDN -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

Ces deux URLs, avec le numéro de version exact (4.1.4), sont documentées ici : splidejs.com/guides/getting-started.

Un point à bien distinguer avant d’aller plus loin : ce <script src="..."> ne fait qu’une seule chose : il charge le code de la bibliothèque Splide dans la page — mais tout seul, il ne démarre rien du tout. Une fois chargée, la bibliothèque met à disposition un outil (le mot Splide), mais rien ne l’utilise encore : aucune image ne bougera, aucune flèche ne sera cliquable, tant que personne ne lui donne l’ordre de s’activer sur notre page.

C’est exactement le rôle du script d’activation, qu’on ajoute juste après : il dit à Splide « prends cet élément précis de ma page, et rends-le fonctionnel ». Vous verrez donc toujours ces deux scripts l’un après l’autre, dans cet ordre précis :

1er <script> (avec src="...") : charge la bibliothèque elle-même. On ne le modifie jamais.
2e <script>, le script d’activation (vide au départ, à écrire) : donne l’ordre à la bibliothèque de démarrer le slider sur notre page.

Le premier doit toujours être chargé avant le second, sinon le script d’activation chercherait à utiliser une bibliothèque qui n’est pas encore là.

Étape 2 : La structure HTML imposée par Splide

Une bibliothèque comme Splide impose une structure HTML précise pour fonctionner : elle recherche des éléments par leurs classes CSS (splide, splide__track, splide__list, splide__slide), qu’il faut respecter à la lettre. D’après la documentation (splidejs.com/structure), le nom des balises HTML (<div>, <ul>, <li>…) n’a pas d’importance — seules les classes comptent, et la hiérarchie track > list > slide doit être respectée sans rien insérer entre les deux.

On utilise ici des <div> partout, plutôt que <ul>/<li> proposés par défaut dans la documentation — une liste de slides n’a pas vraiment le même sens qu’une liste à puces classique (chapitre 18), donc on reste sur un conteneur neutre.

<!-- section : conteneur racine du slider, avec un label pour l'accessibilité -->
<section class="splide" aria-label="Galerie d'images">
  <!-- track : la fenêtre visible du slider -->
  <div class="splide__track">
    <!-- list : le conteneur des slides -->
    <div class="splide__list">
      <!-- une div par image -->
      <div class="splide__slide">
        <img src="https://placehold.co/600x400?text=image1" alt="Image 1">
      </div>
      <div class="splide__slide">
        <img src="https://placehold.co/600x400?text=image2" alt="Image 2">
      </div>
      <div class="splide__slide">
        <img src="https://placehold.co/600x400?text=image3" alt="Image 3">
      </div>
      <div class="splide__slide">
        <img src="https://placehold.co/600x400?text=image4" alt="Image 4">
      </div>
    </div>
  </div>
</section>

Les images utilisées ici viennent de placehold.co (déjà vu au chapitre 50), avec un texte différent sur chacune (?text=image1, ?text=image2…) pour bien les distinguer visuellement pendant les tests.

Étape 3 : Un peu de CSS pour la mise en page

Splide gère déjà tout le style du slider lui-même (flèches, points, transitions). On ajoute juste un peu de CSS pour centrer le slider et limiter sa largeur sur la page :

body {
  margin: 0;
  padding: 40px 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background-color: #f5f5f5;
}

h1 {
  text-align: center;
  color: #1e1e1e;
}

/* .splide fait partie des classes générées par la bibliothèque : on peut la styliser comme n'importe quelle autre classe */
.splide {
  max-width: 600px;
  margin: 0 auto;
}

/* sans cette règle, chaque image garde sa taille brute (600×400) et déborde du conteneur .splide, qui est plus étroit */
.splide__slide img {
  width: 100%;
  height: auto;
  display: block;
}

Pourquoi cette dernière règle est nécessaire : sans elle, chaque image conserve sa taille d’origine (600×400 pixels), ce qui la fait déborder du conteneur .splide — plus étroit — et provoque un rognage visuel désagréable. width: 100%; force l’image à s’adapter à la largeur de son slide, et height: auto; conserve ses proportions. display: block; évite un petit espace parasite sous l’image, un comportement par défaut des images en inline.

Il reste à dire à Splide comment se comporter : revenir au début après la dernière image (type: 'loop') et n’afficher qu’une image à la fois (perPage: 1). D’après la documentation (splidejs.com/guides/options), il existe deux façons de transmettre ces réglages à Splide : en HTML, ou en JavaScript. Les deux produisent exactement le même résultat — c’est un choix de méthode, pas une contrainte technique.

Option A — Paramétrage en HTML

D’après la documentation (splidejs.com/guides/options, section « By Data Attribute »), on peut passer les réglages directement sur la balise racine du slider, via l’attribut data-splide, au format JSON (une syntaxe clé/valeur entre accolades, avec des guillemets doubles autour des clés et des valeurs textuelles).

<section class="splide" aria-label="Galerie d'images" data-splide='{"type":"loop","perPage":1}'>
  <!-- ... le reste de la structure track / list / slide, inchangé ... -->
</section>

Un détail syntaxique important : on utilise des guillemets simples ('...') pour entourer toute la valeur de data-splide, parce que le JSON à l’intérieur utilise déjà des guillemets doubles ("type", "loop"…). Si on avait utilisé des guillemets doubles des deux côtés, le navigateur n’aurait pas su où l’attribut se termine.

Avec cette option, le JavaScript se limite à une seule ligne, qui se contente de démarrer Splide (le mot mount signifie « monter, installer ») sans lui transmettre aucun réglage — puisqu’ils sont déjà dans le HTML :

<script>
  document.addEventListener("DOMContentLoaded", function() {
    new Splide('.splide').mount();
  });
</script>

Squelette à assembler — Option A :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon slider d'images</title>
  <!-- collez ici le lien CSS de Splide, étape 1 -->
  <style>
    /* collez ici le CSS de l'étape 3 */
  </style>
</head>
<body>

  <h1>Mon slider d'images</h1>

  <!-- collez ici la structure track / list / slide de l'étape 2, en ajoutant l'attribut data-splide sur la balise section vu ci-dessus -->

  <!-- collez ici le 1er script (celui qui CHARGE la bibliothèque, avec src=..., vu à l'étape 1) -->

  <script>
    /* collez ici le script d'activation (celui qui contient new Splide(...).mount(), vu juste au-dessus dans l'Option A) */
  </script>
</body>
</html>

Option B — Paramétrage en JavaScript

Toujours d’après la même page de documentation, l’autre façon consiste à passer les réglages directement dans le JavaScript, sous la forme d’un objet (les mêmes paires clé/valeur qu’en JSON, mais sans guillemets autour des clés, dans la syntaxe propre à JavaScript) :

<script>
  document.addEventListener("DOMContentLoaded", function() {
    new Splide('.splide', {
      type: 'loop',
      perPage: 1,
    }).mount();
  });
</script>

Avec cette option, le HTML de la balise section.splide reste simple, sans l’attribut data-splide — tous les réglages vivent uniquement dans le <script>.

Squelette à assembler — Option B :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon slider d'images</title>
  <!-- collez ici le lien CSS de Splide, étape 1 -->
  <style>
    /* collez ici le CSS de l'étape 3 */
  </style>
</head>
<body>

  <h1>Mon slider d'images</h1>

  <!-- collez ici la structure track / list / slide de l'étape 2, SANS l'attribut data-splide cette fois -->

  <!-- collez ici le 1er script (celui qui CHARGE la bibliothèque, avec src=..., vu à l'étape 1) -->

  <script>
    /* collez ici le script d'activation et de paramétrage (celui qui contient new Splide(...) avec { type: 'loop', perPage: 1 }, vu juste au-dessus dans l'Option B) */
  </script>
</body>
</html>

Et les flèches, la pagination ?

Vous remarquez qu’on ne configure nulle part l’apparition des flèches ou des petits points de pagination. D’après la documentation (splidejs.com/guides/options), les options arrows et pagination valent true par défaut : elles s’affichent donc automatiquement, sans qu’on ait besoin de les activer manuellement. On ne les mentionnerait dans la configuration que pour les désactiver (arrows: false), pas pour les activer.

Étape 5 : Tester

Assemblez votre page (peu importe l’option choisie), puis ouvrez-la dans le navigateur. Vous devez voir une image, deux flèches de chaque côté, et 4 petits points de pagination en dessous. Cliquez sur une flèche ou sur un point : l’image change avec une transition. Après la 4e image, un clic sur « suivant » doit revenir à la 1ère (grâce à type: 'loop').

Bloqué, ou envie de comparer votre résultat ? Choisissez l’option que vous avez suivie ci-dessous.