Bootstrap

Tuto Bootstrap: Créer des diaporamas avec Bootstrap Carousel

Bienvenue dans ce nouveau tutoriel Bootstrap où nous vous montrons comment créer des diaporamas avec Bootstrap Carousel.

Contexte d’utilisation

Le contexte de l’utilisation du composant Carousel de Bootstrap est principalement dans la création de diaporamas sur les sites web, en particulier dans les magazines en ligne. Les créateurs de sites web utilisent couramment ces diaporamas pour mettre en avant les images liées à certains articles, en général, des articles phares ou ceux auxquels ils souhaitent accorder une visibilité particulière. Les diaporamas animés sont un moyen efficace d’attirer l’attention des lecteurs de manière saisissante.

Le composant Carousel de Bootstrap est un outil qui permet de créer ces diaporamas. Il repose sur une combinaison de CSS3 et de code JavaScript pour faire défiler, à intervalles réguliers, une série d’images auxquelles vous pouvez ajouter du texte et des indicateurs de navigation.

Cependant, il est important de noter que le composant Bootstrap Carousel n’effectue pas de normalisation automatique des tailles d’image. Par conséquent, nous recommandons d’utiliser des images de taille similaire ou d’ajouter des fonctionnalités personnalisées pour ajuster correctement le contenu des diapositives en fonction de vos besoins et de la mise en page de votre site.

La gestion de l’activation de diapositives avec Bootstrap Carousel

Exemple : Une fonctionnalité intéressante de Bootstrap Carousel concerne la gestion de l’activation des diapositives dans les navigateurs prenant en charge l’API Page Visibility. Lorsque la page n’est pas active, les diapositives ne défilent pas. Cela signifie que si la fenêtre du navigateur contenant le diaporama est ouverte, mais que l’utilisateur a une autre fenêtre en premier plan ou interagit avec une autre application, la présentation s’interrompt automatiquement. Elle ne reprendra que lorsque l’utilisateur reviendra consulter la page.

Prenons un exemple concret : imaginez que vous consultez un site web avec un diaporama en cours. Vous cliquez ensuite sur une autre application ou une autre fenêtre, la présentation du diaporama se met en pause. Vous continuez à travailler sur votre application ou à parcourir une autre page. Lorsque vous revenez sur l’onglet du navigateur où se trouve le site, le diaporama reprend automatiquement là où il s’était arrêté, vous permettant de reprendre la visualisation sans interruption.

Cette fonctionnalité est particulièrement utile pour améliorer l’expérience de l’utilisateur et garantir qu’il puisse interagir avec le diaporama à son rythme, même en cas de distractions temporaires. Elle démontre comment Bootstrap Carousel offre des fonctionnalités avancées pour la gestion des présentations interactives sur les sites web.

Illustration avec le code

Titre : Exemple de Gestion de l’Activation de Diapositives avec Bootstrap Carousel

Exemple : Pour illustrer la gestion de l’activation des diapositives avec Bootstrap Carousel, considérons le code HTML suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple Bootstrap Carousel</title>
    <!-- Inclusion des fichiers CSS et JavaScript de Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <h1>Exemple de Bootstrap Carousel avec gestion de l'activation des diapositives</h1>
    <div id="monCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicateurs de diapositives -->
        <ul class="carousel-indicators">
            <li data-target="#monCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#monCarousel" data-slide-to="1"></li>
            <li data-target="#monCarousel" data-slide-to="2"></li>
        </ul>

        <!-- Diapositives -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="image1.jpg" alt="Image 1">
                <div class="carousel-caption">
                    <h3>Diapositive 1</h3>
                    <p>Cette diapositive est la première.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="image2.jpg" alt="Image 2">
                <div class="carousel-caption">
                    <h3>Diapositive 2</h3>
                    <p>Voici la deuxième diapositive.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="image3.jpg" alt="Image 3">
                <div class="carousel-caption">
                    <h3>Diapositive 3</h3>
                    <p>Et voici la troisième diapositive.</p>
                </div>
            </div>
        </div>

        <!-- Contrôles du carrousel -->
        <a class="carousel-control-prev" href="#monCarousel" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#monCarousel" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>

</body>
</html>

Dans cet exemple, nous avons créé un diaporama Bootstrap Carousel simple avec trois diapositives et des indicateurs de diapositives. Lorsque l’utilisateur consulte le site et interagit avec d’autres applications ou fenêtres, le diaporama suspend automatiquement son défilement. Lorsqu’il revient à l’onglet du navigateur, le diaporama reprend là où il s’était arrêté, offrant une expérience fluide et conviviale. Cela démontre comment Bootstrap Carousel gère automatiquement l’activation des diapositives pour améliorer l’expérience de l’utilisateur.

Comment utiliser Bootstrap Caurosel pour créer des diaporamas

Le Courosel de Bootstrap vous permet de créer différentes présentations :

avec des diapositives qui ne contiennent que des images ;
avec commandes avant et arrière ;
en plus des contrôles, vous pouvez également ajouter des indicateurs ;
enfin, avec une légende aux diapositives.

Voyons maintenant comment implémenter chacun de ces diaporamas en partant du plus basique.

Tout d’abord, enveloppez le carrousel dans une balise <div> à laquelle vous devez attribuer les classes “carousel” et “slide”, ainsi que l’attribut “data-ride=”carousel”.

Vous devez également attribuer un identifiant à l’élément que les contrôles utilisent pour l’identifier, évitant ainsi tout conflit avec d’autres diaporamas de la page.

De plus, pour que le carrousel soit visible, vous devez toujours ajouter la classe active à un élément de présentation.

Exemple, comment devrait être le code d’une présentation avec uniquement des images :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Présentation d'Images avec Bootstrap</title>
    <!-- Inclure les fichiers CSS et JavaScript de Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <h1>Présentation d'Images avec Bootstrap</h1>
    <div id="monCarousel" class="carousel slide" data-ride="carousel">

        <!-- Diapositives -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="image1.jpg" alt="Image 1">
            </div>
            <div class="carousel-item">
                <img src="image2.jpg" alt="Image 2">
            </div>
            <div class="carousel-item">
                <img src="image3.jpg" alt="Image 3">
            </div>
        </div>

        <!-- Contrôles du carrousel -->
        <a class="carousel-control-prev" href="#monCarousel" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#monCarousel" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>

</body>
</html>

Dans cet exemple, nous avons créé un diaporama Bootstrap Carousel avec trois diapositives contenant uniquement des images. Les images sont incluses dans les balises <img>, et le diaporama est contrôlé par des flèches de navigation “Précédent” et “Suivant”. Vous pouvez personnaliser ce code en remplaçant les chemins des images par les vôtres pour afficher vos propres images dans la présentation.

Si nous voulons insérer les contrôles, nous devons ajouter le code suivant :

Pour ajouter les contrôles de navigation (boutons “Précédent” et “Suivant”) à la présentation d’images avec Bootstrap, vous devez utiliser le code que j’ai fourni dans l’exemple précédent. Les contrôles sont inclus dans le code HTML du carrousel Bootstrap, et vous pouvez les personnaliser davantage si nécessaire.

Voici à nouveau le code avec les contrôles de navigation inclus :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Présentation d'Images avec Bootstrap</title>
    <!-- Inclure les fichiers CSS et JavaScript de Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <h1>Présentation d'Images avec Bootstrap</h1>
    <div id="monCarousel" class="carousel slide" data-ride="carousel">

        <!-- Diapositives -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="image1.jpg" alt="Image 1">
            </div>
            <div class="carousel-item">
                <img src="image2.jpg" alt="Image 2">
            </div>
            <div class="carousel-item">
                <img src="image3.jpg" alt="Image 3">
            </div>
        </div>

        <!-- Contrôles du carrousel -->
        <a class="carousel-control-prev" href="#monCarousel" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#monCarousel" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>

</body>
</html>

Ce code inclut les contrôles de navigation qui permettent aux utilisateurs de passer d’une diapositive à l’autre en cliquant sur les flèches “Précédent” et “Suivant”. Vous pouvez personnaliser l’apparence des contrôles en modifiant les classes Bootstrap utilisées pour les flèches.

Exemple

Ici,

Nous avons associé la classe “carousel-control-prev” et l’attribut “data-slide” avec la valeur “prev” au bouton de retour, tandis que nous avons attribué la classe “carousel-control-next” et l’attribut “data-slide” avec la valeur “next” au bouton de progression. Dans l’attribut “href” de ces balises, nous avons inséré l’ID que nous avons attribué au carrousel. Enfin, nous avons utilisé les classes “carousel-control-prev-icon” et “carousel-control-next-icon” pour créer les icônes correspondantes.

À ce stade, nous pourrions également ajouter les indicateurs. Pour ce faire, nous devons créer une liste ordonnée (élément “ol”) à laquelle nous attribuons la classe “carousel-indicators” de la manière suivante :

<ol class="carousel-indicators">
    <li data-target="#monCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#monCarousel" data-slide-to="1"></li>
    <li data-target="#monCarousel" data-slide-to="2"></li>
</ol>

Dans cet exemple, nous avons créé une liste ordonnée (élément “ol”) avec trois éléments “li”. Chaque “li” représente un indicateur pour une diapositive. L’attribut “data-target” contient l’ID de notre carrousel, et l’attribut “data-slide-to” indique l’index de la diapositive à laquelle cet indicateur est associé. L’indicateur actif est marqué avec la classe “active”.

En ajoutant ces indicateurs, les utilisateurs pourront voir à quelle diapositive ils se trouvent dans le carrousel, ce qui améliore la navigation.

Ajouter une légende aux diapositives

Pour finir, nous avons la possibilité d’améliorer la présentation en intégrant des légendes aux diapositives. Nous accomplissons cela en ajoutant un élément HTML “div” avec la classe “carousel-caption” à chaque élément du carrousel (reconnaissable grâce à la classe “carousel-item”). À l’intérieur de chaque “div” avec la classe “carousel-caption”, nous insérons le contenu de notre légende.

Ainsi, en combinant tout le code que nous avons vu jusqu’à présent, voici un exemple complet illustrant comment le code pour une présentation doit être structuré, incluant des contrôles de navigation, des indicateurs et des légendes :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Présentation d'Images avec Bootstrap</title>
    <!-- Inclure les fichiers CSS et JavaScript de Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <h1>Présentation d'Images avec Bootstrap</h1>
    <div id="monCarousel" class="carousel slide" data-ride="carousel">

        <!-- Indicateurs -->
        <ol class="carousel-indicators">
            <li data-target="#monCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#monCarousel" data-slide-to="1"></li>
            <li data-target="#monCarousel" data-slide-to="2"></li>
        </ol>

        <!-- Diapositives -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="image1.jpg" alt="Image 1">
                <div class="carousel-caption">
                    <h3>Légende de la Diapositive 1</h3>
                    <p>Ceci est un exemple de légende pour la première diapositive.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="image2.jpg" alt="Image 2">
                <div class="carousel-caption">
                    <h3>Légende de la Diapositive 2</h3>
                    <p>Ceci est un exemple de légende pour la deuxième diapositive.</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="image3.jpg" alt="Image 3">
                <div class="carousel-caption">
                    <h3>Légende de la Diapositive 3</h3>
                    <p>Ceci est un exemple de légende pour la troisième diapositive.</p>
                </div>
            </div>
        </div>

        <!-- Contrôles du carrousel -->
        <a class="carousel-control-prev" href="#monCarousel" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#monCarousel" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>

</body>
</html>

Ce code complet présente une présentation d’images avec Bootstrap, comprenant des contrôles de navigation, des indicateurs et des légendes pour chaque diapositive. Vous pouvez personnaliser les légendes et les images selon vos besoins pour créer une présentation interactive et attrayante.

Comment modifier l’effet ?

Pour modifier l’effet de transition entre les diapositives dans un carrousel Bootstrap, vous pouvez utiliser des classes d’effets de transition prédéfinies ou personnaliser les transitions avec votre propre code CSS. Voici comment vous pouvez faire cela :

Utiliser des classes prédéfinies :
Bootstrap offre plusieurs classes prédéfinies pour les transitions entre les diapositives. Vous pouvez les ajouter à votre carrousel pour modifier l’effet. Voici quelques-unes des classes couramment utilisées :

“slide” (effet par défaut) : Les diapositives glissent horizontalement.
“fade” : Les diapositives s’estompent les unes dans les autres.

Pour utiliser l’une de ces classes, ajoutez-la à la div principale de votre carrousel (celle avec la classe “carousel”) comme suit :

<div id="monCarousel" class="carousel slide fade" data-ride="carousel">

Personnaliser avec du CSS :
Si vous souhaitez une transition personnalisée, vous pouvez ajouter votre propre code CSS pour définir l’effet souhaité. Par exemple, pour une transition de fondu personnalisée, vous pouvez utiliser le code CSS suivant :

.carousel-fade .carousel-item {
    transition: opacity 1s ease-in-out;
}

.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right,
.carousel-fade .carousel-item.active {
    opacity: 1;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active.carousel-item-left,
.carousel-fade .carousel-item.active.carousel-item-right {
    opacity: 0;
}

Ensuite, ajoutez la classe “carousel-fade” à la div principale de votre carrousel pour utiliser cet effet personnalisé.

N’oubliez pas de personnaliser le code CSS selon vos besoins pour créer l’effet de transition souhaité.

En résumé, vous pouvez modifier l’effet de transition dans un carrousel Bootstrap en utilisant des classes prédéfinies ou en personnalisant l’effet avec du code CSS. Choisissez l’approche qui convient le mieux à votre projet et à vos besoins de conception.