Pour cette section, la librairie Swiper sera utilisée afin de créer un carrousel permettant d’afficher des images du groupe entrain de performer.
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 vidéo-clips. Ce choix est à votre discrétion.
Ajoutez le titre de la section: "Performances". Cet élément devra être seul sur une ligne.
Insérez votre carrousel swiper sous le titre. Celui-ci doit avoir une direction horizontale et pouvoir tourner à l'infini.
Faites en sorte que chaque slide aille une hauteur de 300px et insérez-y une image. Ces images devront représenter le groupe entrain de performer "live". Chaqu'une de ces images doit couvrir entièrement sa slide grâce à object-fit.
À partir du brakpoint lg(992px), faites en sorte que deux slides soient affichées en même temps et qu'un espace de 20px entre elles soit présent.
Faites en sorte que des flèches de navigations soient affichées à gauche et à droite de votre carrousel.
N'hésitez pas à remplacer les flèches bleues par défaut de Swiper par des flèches personnalisées.