Dans l'univers du développement web, l'accessibilité est un impératif. Lorsqu'il...
Bienvenue dans ce nouveau tutoriel Bootstrap où nous vous montrons comment créer des diaporamas avec Bootstrap Carousel.
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.
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.
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.
Le Courosel de Bootstrap vous permet de créer différentes présentations :
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.
<!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.
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.
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.
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.
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 :
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">.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.
Voici une série d’exercices conçus pour perfectionner vos compétences Excel. Les corrigés sont inclus pour…
Excel offre plusieurs méthodes pour calculer une moyenne tout en tenant compte des filtres ou…
Excel propose plusieurs fonctions pour insérer ou manipuler la date actuelle. Voici les principales méthodes…
Lorsque des nombres sont stockés sous forme de texte dans Excel, ils ne peuvent pas…
Extraire uniquement les chiffres d'une cellule contenant du texte et des nombres mélangés est une…
Pour supprimer plusieurs caractères spécifiques (par exemple, des symboles, chiffres ou lettres indésirables) dans des…
This website uses cookies.