Pour cette étape du projet, la librairie Swiper sera utilisée afin de créer un carrousel permettant d’afficher des images promotionnelles du groupe.
Aperçu du résultat 👇
Requis
Commencez par créer une <section> dans la zone du contenu principal de votre page. Cette section peut être avant ou après celle des cartes des membres. Ce choix est à votre discrétion.
Ajoutez le titre de la section: "Images promotionnelles". Cet élément devra être seul sur une ligne.
Insérez votre carrousel swiper sous ce titre. Celui-ci doit avoir une direction horizontale et ne doit pas tourner à l'infini. Il doit être possible d'atteindre un début et une fin.
Faites en sorte que chaque slide aille un ratio 16/9 et insérez une image par slide. Ces images ne devront pas être une pochette d'album ou une image du groupe entrain de performer, mais bien des images à caractère promotionnelles. Faites en sorte que chaque image couvre entièrement sa slide grâce à object-fit.
Faites en sorte qu'une navigation avec des points soit présente dans le bas du carrousel. Inspectez les points afin de découvrir les classes que Swiper leur attribue et servez-vous-en afin de modifier leur apparence. Les points réguliers devront être opaques (🚫 semi-transparents) et devront avoir une couleur de fond autre que noir.
Utilisez les configurations de Swiper afin de modifier la classe attribuée par défaut au point actif. Utilisez la nouvelle classe du point actif pour modifier sa couleur. Elle devra être différente du bleu 🔵 par défaut.
Vous pouvez changer la taille des points, leur forme, ajouter des images d''arrière-plan, etc. N''hésitez pas à être créatif