Visionneuse d'images avec un carrousel

Le carrousel Bootstrap n'est pas obligé de défiler les images.

On peut aussi l'utiliser pour créer une visionneuse d'images, qui change d'image sur le clic de l'utilisateur.

Exemple :

Cette fonctionnalité est très utilisée pour visualiser des images de jeu, des images de maison sur un site immobilier, etc.

Première étape : l'animation

On ne veut pas l'animation de défilement de droite à gauche, mais l'animation de fondu d'une image à l'autre.

L'exemple Bootstrap est donc l'exemple nommé Crossfade.

Ce qui est différent ?

---> L'ajout de la classe carousel-fade

Deuxième étape : retirer les boutons

Pas besoin de pouvoir naviguer au suivant ou précédent ici, donc on retire les boutons.

Troisième étape : Insérer les items de carrousel

Créer un item de carrousel (carousel-item) par image.

<div id="monCarousel" class="carousel slide carousel-fade">
    <div class="carousel-inner rounded">
        <div class="carousel-item active">
            <img class="img-fluid" src="img/biomutant_logo.jpg" alt="Biomutant">
        </div>
        <div class="carousel-item">
            <img class="img-fluid" src="img/biomutant_1.jpg" alt="Biomutant">
        </div>
        <div class="carousel-item">
            <img class="img-fluid" src="img/biomutant_2.jpg" alt="Biomutant">
        </div>
        <div class="carousel-item">
            <img class="img-fluid" src="img/biomutant_3.jpg" alt="Biomutant">
        </div>
    </div>
</div>

Quatrième étape : créer des indicateurs cliquables

Les indicateurs de carrousel peuvent être autre chose que des petites barres au bas du carrousel.

Ce peut être des images, des paragraphes, etc.

Pour que les indicateurs soient externes au carrousel, il faut les sortir du carrousel.

Important, il faut tout de même conserver :

• data-bs-target : l'id du carrousel sur lequel s'applique les indicateurs
• data-bs-slide-to : le numéro de diapositive à afficher par cet indicateur
• UN indicateur avec la classe active : laquelle des dispositive est affichée par défaut

<div class="d-flex justify-content-evenly my-3">
    <img data-bs-target="#monCarousel" data-bs-slide-to="0" class="active w-25 img-thumbnail"
        src="img/biomutant_logo.jpg" alt="Biomutant">

    <img data-bs-target="#monCarousel" data-bs-slide-to="1" class="w-25 img-thumbnail"
        src="img/biomutant_1.jpg" alt="Biomutant">

    <img data-bs-target="#monCarousel" data-bs-slide-to="2" class="w-25 img-thumbnail"
        src="img/biomutant_2.jpg" alt="Biomutant">

    <img data-bs-target="#monCarousel" data-bs-slide-to="3" class="w-25 img-thumbnail"
        src="img/biomutant_3.jpg" alt="Biomutant">
</div>