Scroll-snap - WhatIsAdam

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

Oeuvre #1 Oeuvre #2 Oeuvre #3 Oeuvre #4 Oeuvre #5 Oeuvre #6 Oeuvre #7 Oeuvre #8 Oeuvre #9 Oeuvre #10 Oeuvre #11 Oeuvre #12 Requis Créez-vous un Pen avec fond blanc ⚪️ sur CodePen afin de réaliser cet exercice. 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. 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. Assurez-vous que seule la barre de défilement horizontale est visible ↔️. Celle verticale ne doit en aucun cas être visible 🚫. 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 📚