Easy-Micro

LOGICIEL Bootstrap
Carrousel

Carrousel Bootstrap

⚠ Attention

Pour pouvoir utiliser les composants Bootstrap, vous devez télécharger le fichier bootstrap.min.js. Celui-ci se trouve dans le package de base (dossier dist).

Exemple de composant de diaporama Bootstrap

<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8">
<head>
<title>Carrousel Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/monbootstrapamoi.css" rel="stylesheet">
</head>
<body>

<!-- conteneur Bootstrap principal (pas de rapport avec le carrousel)-->
<div class="container">
<h1>Carrousel Bootstrap</h1>

<!-- Ci-dessous conteneur du carrousel
La classe carousel appel le carrousel
La classe slide ajoute une transition et un effet d'animation
L'attribut data-ride="carousel" permet un auto-play
La classe carousel-fade permet un effet de transition en fading (l'image disparaît au profit de la nouvelle)
-->

<!-- Conteneur du carrousel (avec ajout balise style) -->
<div id="Moncarrouselamoi" class="carousel slide carousel-fade" data-bs-ride="carousel" style="width:80%;">

<!-- Indicateurs : Les trois petit traits -->
<ol class="carousel-indicators">
<li data-bs-target="#Moncarrouselamoi" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#Moncarrouselamoi" data-bs-slide-to="1"></li>
<li data-bs-target="#Moncarrouselamoi" data-bs-slide-to="2"></li>
</ol>

<!-- Conteneur des trois images --> <!-- La taille des 3 images peut être modifiée dans css/monbootstrapamoi.css --> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="images/t3.jpg" alt="Première diapo"> <div class="carousel-caption d-none d-md-block"> <h5>Titre diapo</h5> <p>Commentaire diapo</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="images/t2.jpg" alt="Deuxième diapo"> <div class="carousel-caption d-none d-md-block"> <h5>Titre diapo</h5> <p>Commentaire diapo</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" src="images/t1.jpg" alt="Troisième diapo"> <div class="carousel-caption d-none d-md-block"> <h5>Titre diapo</h5> <p>Commentaire diapo</p> </div> </div> </div> <!-- Boutons de navigation du carrousel --> <!-- Les deux classes ci-dessous (carousel-control-prev et carousel-control-next) peuvent être modifiées dans le fichier css/monbootstrapamoi.css--> <a class="carousel-control-prev" href="#Moncarrouselamoi" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Précédent</span> </a> <a class="carousel-control-next" href="#Moncarrouselamoi" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Suivant</span> </a> </div> </div> <!-- Si vous en avez besoin, Jquery doit absolument être appelé AVANT le fichier bootstrap.js --> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
Exemple issu de Getbootstrap.com - > Voir cet exemple Easy-Micro

Exemple de CSS pour modifier les tailles des images du carrousel:
.carousel .item {
    max-height: 400px;
    margin-right: auto;
    margin-left: auto;
}

.carousel img {
    max-width:300px;
    margin-right: auto;
    margin-left: auto;
}
Exemple à réaliser dans un fichier css/mon-style.css

Exemple de CSS pour modifier les deux boutons Next et Prev du carrousel:
Attention, ce sont des images appelées par CSS et non pas des caractères
.carousel-control-next-icon, .carousel-control-prev-icon {
 background-color: blue;
}
Exemple à réaliser dans un fichier css/mon-style.css

Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]