Bootstrap : Carrousels¶

Les composants JavaScript de Bootstrap¶

Avec le temps, on a vu surgir des librairies JavaScript pour intégrer des effets dans nos pages qui étaient courants, mais complexe à produire.

Bootstrap ne fait pas exception : il propose des modules programmés en JavaScript pour donner accès à des effets visuels, sans avoir à écrire le code nous-mêmes.

Scripts à la fin du HTML

Le script Bootstrap ne fait pas exception à la règle que nous nous sommes donnée : l'appel aux fichiers de script se font à la fin du HTML pour éviter que ces derniers n'empêchent le chargement de la page dans le navigateur.

D'ailleurs, lorsqu'on regarde le squelette HTML proposé dans la documentation de Boottrspa, ils fournissent eux-mêmes un squelette ayant l'appel au script à la fin du HTML.

Carrousel¶

Le carrousel est un diaporama qui permet de boucler sur une série de blocs de contenu, principalement images et texte. Il peut avoir différents temps de transition et offrir des contrôles et indicateurs pour passer au prochain bloc ou au précédent.

Carrousel

Le minimum nécessaire pour qu'un carrousel soit fonctionnel comprend :

Un contenant parent
- classe carousel pour déclarer un carrousel
- classe slide active le défilement des diapositives
Un contenant enfant
- classe carousel-inner pour contenir la liste des diapositives de carrousel. Ceci représente le bloc des diapositives.
Des blocs enfants au carousel-inner pour les diapositives
- classe carousel-item pour un enfant
- un des enfants doit obligatoirement avoir la classe active pour que le carrousel fonctionne; cela indique la première diapositive de départ
Du contenu dans les enfants items de carrousel

Exemple de base sur une balise <header>:

<header id="carouselEnTete" class="carousel slide">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/forest1.jpg" class="d-block w-100" alt="enchanted forest">
        </div>
        <div class="carousel-item">
            <img src="img/forest2.jpg" class="d-block w-100" alt="enchanted forest">
        </div>
        <div class="carousel-item">
            <img src="img/forest3.jpg" class="d-block w-100" alt="enchanted forest">
        </div>
    </div>
</header>

Taille du carrousel

Le carrousel s'adapte à la taille du contenu qu'on y met. Donc, évidemment, si on utilise de très grandes images, alors le carrousel sera très grand.

Comme on essaie idéalement de limiter la bande passante pour assurer un site le plus rapide possible, il est de bonne pratique d'avoir les images de la bonne taille voulue, plutôt qu'avoir de très grandes images.

Exemple avec contenu sur quelques diapos :

<header class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="img/banner1.jpg" alt="blue background" class="w-100">
            <h3 class="carousel-caption display-3">Introduction aux carousels</h3>
        </div>
        <div class="carousel-item">
            <img src="img/banner2.jpg" alt="colorful phone" class="w-100">
            <div class="carousel-caption">
                <h3>Texte sur une diapo</h3>
                <p>Avec plusieurs éléments texte, tels qu'un titre et un pragraphe.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="img/forest3.jpg" alt="enchanted forest">
        </div>
    </div>
</header>

contrôles Suivant et Précédent¶

Cela nécessite :

Le bloc parent du carrousel doit avoir un identifiant

<header id="exempleCarousel" class="carousel slide">

Après le bloc carousel-inner, ajouter deux boutons, un pour précédent, l'autre pour suivant :

<!--Contrôles Précédent, Suivant-->
<button class="carousel-control-prev" type="button" data-bs-target="#exempleCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#exempleCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
</button>

Chaque bouton doit avoir les informations suivantes :

soit la classe carousel-control-prev (Précédent) ou carousel-control-next (Suivant)
cibler le carrousel avec l'attribut data-bs-target et l'identifiant du carrousel
un type button pour indiquer que la balise
une propriété data-bs-slide avec soit la valeur prev ou next pour indiquer le sens du passage à la prochaine diapo
un span indiquant l'icône à utiliser

L'ajout d'indicateurs visuels¶

Des indicateurs au bas du carrousel permettent de voir rapidement combien il y a de diapositives et laquelle est présentement active. Les indicateurs sont parfois des petits points ou des traits au bas du carrousel. Avec Bootstrap, ce sont des traits, puisqu'ils sont plus conformes au flat design.

On crée des indicateurs à l'aide :

d'un bloc parent englobant les indicateurs, avec la classe carousel-indicators
un bouton par indicateur avec, pour chaque bouton
le type button pour que Bootstrap s'en occupe aevc son script
le carrousel cible dans data-bs-target
la diapositive à atteindre lorsqu'on clique sur l'indicateur avec data-bs-slide-to
un des boutons doit avoir la classe active pour indiquer quelle diapo est affichée à l'ouverture

<!--Indicateurs du carrousel-->
<div class="carousel-indicators">
    <button type="button" data-bs-target="#exempleCarousel" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#exempleCarousel" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#exempleCarousel" data-bs-slide-to="2"></button>
</div>

Note: Ces indicateurs sont déclarés avant le bloc contenant les items de carrousel.

Important

Ne jamais oublier qu'une diapositive de carousel peut contenir à peu près n'importe quoi, y compris des cartes, un système de grille, etc...

Donc, un carousel complet pourrait ressembler à :

    <header id="exempleCarousel" class="carousel slide">
        <!--Indicateurs du carrousel-->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#exempleCarousel" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#exempleCarousel" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#exempleCarousel" data-bs-slide-to="2"></button>
        </div>
        <!--Contenu du carrousel-->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/banner1.jpg" alt="blue background" class="w-100">
                <h3 class="carousel-caption display-3">Introduction aux carousels</h3>
            </div>
            <div class="carousel-item">
                <img src="img/banner2.jpg" alt="colorful phone" class="w-100">
                <div class="carousel-caption">
                    <h3>Texte sur une diapo</h3>
                    <p>Avec plusieurs éléments texte, tels qu'un titre et un pragraphe.</p>
                </div>
            </div>
            <div class="carousel-item">
                <div class="card">
                    <img src="img/banner3.jpg" alt="laptop lady" class="card-img">
                    <div class="card-img-overlay d-flex flex-column justify-content-center align-items-end me-5 pe-5">
                        <h3 class="display-2 text-white ">Introduction aux carousels</h3>
                        <p class="lead">Un item de carousel affiché en carte, avec un texte au-dessus de la carte !</p>
                    </div>
                </div>
            </div>
        </div>
        <!--Contrôles Précédent, Suivant-->
        <button class="carousel-control-prev" type="button" data-bs-target="#exempleCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#exempleCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </header>

Carrousel avec groupe de cartes¶

Il est possible d'insérer tout types d'affichage dans un item de carrousel :

grille
carte
groupe de cartes
etc

Ainsi, on peut créer un carrousel qui navigue à travers une liste d'items.

Exemple sur Steam :

Steam Carousel

Dans chaque carousel-item, on retrouve un card-group de 4 cartes.

Chaque carte est construite avec un card-img-overlay contenant un lien de type streched-link.

Exemple d'un item de carousel en groupe de cartes :

<div class="carousel-item">
    <div class="card-group">
        <div class="card">
            <img src="img/banner3.jpg" alt="laptop lady" class="card-img">
            <div class="card-img-overlay d-flex flex-column justify-content-end align-items-center me-5 pe-5">
                <h3 class="display-2 text-white ">Introduction aux carousels</h3>
                <p class="lead">Un item de carousel affiché en carte, avec un texte au-dessus de la carte !</p>
                <a href="#" class="stretched-link">Link étendu sur toute la carte</a>
            </div>
        </div>

        ....Ajouter d'autres cartes du groupe ici

    </div>
</div>