Créer un slider full CSS en quelques lignes

Dans cet article, je vais vous présenter ma méthode pour créer un slider full CSS en quelques lignes, que j’utilise très souvent pour les versions mobiles. Mais quel intérêt de faire un slider en css alors qu’il y a de nombreuses libs JS qui permettent déjà de faire ça très rapidement et avec plein de features ?

Pourquoi faire un slider full CSS ?

• Optimisation : Un slider implémenté uniquement en CSS sera beaucoup plus léger par rapport à un slider en JavaScript ou jQuery, surtout sur les appareils mobiles, ce qui permettra d’améliorer les performances de votre page.
• Simplicité : Avec un slider full CSS, pas besoin d’ajouter de librairie, de parcourir la doc pour savoir comment l’implémenter, it’s only css !

Comment faire un slider full CSS ?

Pour faire ce slider, commençons par le html, rien de compliqué :

<div class="container">
  <h1>My slider full CSS</h1>

  <div class="slider">
    <div class="slide">
      <img src="https://randomwordgenerator.com/img/picture-generator/57e9d5434c54af14f1dc8460962e33791c3ad6e04e507440752f78d79e45c5_640.jpg" alt="">
      <h2>Slide 1</h2>
    </div>
    <div class="slide">
      <img src="https://randomwordgenerator.com/img/picture-generator/57e9d5434c54af14f1dc8460962e33791c3ad6e04e507440752f78d79e45c5_640.jpg" alt="">
      <h2>Slide 2</h2>
    </div>
    <div class="slide">
      <img src="https://randomwordgenerator.com/img/picture-generator/57e9d5434c54af14f1dc8460962e33791c3ad6e04e507440752f78d79e45c5_640.jpg" alt="">
      <h2>Slide 3</h2>
    </div>
  </div>

</div>

Ensuite, passons au CSS. Nous allons utiliser flexbox afin d’aligner les différentes slides horizontalement, un overflow-x afin de permettre le scroll horizontal, ainsi que des marges sur les slides et des petits ajustements sur l’image pour de l’esthétique. Voici le code et le résultat :

.slider {
  display: flex;
  overflow-x: scroll;
}

.slider > div:not(:first-child) {
  margin-left: 20px;
}

.slide img {
  aspect-ratio: 16 / 9;
  max-height: 250px;
}

Quelques petites améliorations

Nous avons déjà quelque chose de propre avec seulement ces quelques lignes ! Il est possible de l’améliorer encore, notamment en ajoutant des propriétés flex qui obligeront les slides à avoir la même taille, les empêcher de se rétrécir et d’avoir une taille minimale.

Nous pouvons également ajouter la propriété scroll-snap-type, qui permet d’avoir des points d’accroche et de définir où le scroll s’arrête. Ici, on demande grâce à la propriété scroll-snap-align que l’on s’arrête au début de la slide.

.slider {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.slider > div {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 320px;
    scroll-snap-align: start;
}

Si vous souhaitez avoir le code en entier ainsi qu’une démo, vous pouvez cliquer ici pour accéder au CodePen de cet exercice.

J’espère que cet article vous aura été utile et vous aura montré qu’un slider en full CSS, c’est possible et ça fonctionne plutôt bien !