Pour cet exercice, vous devrez réaliser un carrousel CSS mettant en valeur 12 œuvres de l’artiste québécois WhatIsAdam.

Aperçu du résultat 👇

Matériel

Médias 🖼️

1
https://ex.smnarnold.com/scroll-snap/wia/1.webp
2
https://ex.smnarnold.com/scroll-snap/wia/2.webp
3
https://ex.smnarnold.com/scroll-snap/wia/3.webp
4
https://ex.smnarnold.com/scroll-snap/wia/4.webp
5
https://ex.smnarnold.com/scroll-snap/wia/5.webp
6
https://ex.smnarnold.com/scroll-snap/wia/6.webp
7
https://ex.smnarnold.com/scroll-snap/wia/7.webp
8
https://ex.smnarnold.com/scroll-snap/wia/8.webp
9
https://ex.smnarnold.com/scroll-snap/wia/9.webp
10
https://ex.smnarnold.com/scroll-snap/wia/10.webp
11
https://ex.smnarnold.com/scroll-snap/wia/11.webp
12
https://ex.smnarnold.com/scroll-snap/wia/12.webp

Requis

  1. Créez-vous un Pen avec fond blanc ⚪️ sur CodePen afin de réaliser cet exercice.

  2. Créez ensuite l'élément correspondant à votre carrousel. Celui-ci doit prendre toute la largeur, ainsi que la moitié de la hauteur de la page et être centré verticalement ↕️ dans celle-ci.

  3. Insérez-les 12 images listées ci-dessus ☝️dans votre carrousel. Faites en sorte que chacune d'entre elles prenne toute la hauteur de votre carrousel.

    Par défaut, vos images n'auront pas l'espace nécessaire afin de s'afficher une à côté de l'autre, il faudra donc les forcer en appliquant la propriété white-space: nowrap; au carrousel. Cette propriété permet de spécifier que des éléments inline contenus dans l'élément en question n'ont pas le droit de faire de retour à la ligne, même si l'espace vient à manquer.

  4. Assurez-vous que seule la barre de défilement horizontale est visible ↔️. Celle verticale ne doit en aucun cas être visible 🚫.

  5. Faites en sorte que toutes les oeuvres "snap" au centre de votre carrousel lorsque l'utilisateur cesse de faire défiler le carrousel.

Notes de cours 📚