Dernière mise à jour le 17 février 2023 par LMD

Le code HTML. Il faut un conteneur pour des images ou d’autres conteneurs de niveau inférieur (par ex des div ou articles ou autres)

<div class="container">
   <img src="images/genie01.jpg" alt="à compléter">
   <img src="images/genie02.jpg" alt="à compléter">
   <img src="images/genie03.jpg" alt="à compléter">
   <img src="images/genie04.jpg" alt="à compléter">
   <img src="images/genie05.jpg" alt="à compléter">
   <img src="images/genie06.jpg" alt="à compléter">
   <img src="images/genie07.jpg" alt="à compléter">
</div>

La mise en forme du conteneur se fait dans les CSS en le déclarant flexible et en autorisant le débordement horizontal :

.container {
   display: flex;
   overflow-x: auto;
}

Le flex place les images à l’horizontale (axe principal par défaut) mais il les réduit pour forcer à toutes les faire rentrer dans la largeur du viewport. Il faut donc donner une dimension minimum aux images afin qu’elles ne se réduisent pas (ici la valeur 400px est indicative et vous devez l’adapter à votre contenu). La marge sert à écarter les images si besoin. Le vertical-align supprime la petite bande indésirable sous les images (Voir )

.container img {
   margin-right: 15px;
   min-width: 400px;
   vertical-align: bottom;
}

Il ne vous reste plus qu’à changer le HTML pour utiliser vos propres images et à tester.

Une bonne ressource sur internet permet de compléter cette explication, en ajoutant un magnétisme sur chaque image au moment du déplacement et en proposant une autre façon de régler la largeur des images, entièrement en flex :
https://vincentdubroeucq.com/slider-carrousel-sans-js-css-scoll-snap/