Easy-Micro [ BOOTSTRAP - Carrousel ] - Formations informatiques pour entreprises

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

< >