devstory

Le Tutoriel de Bootstrap Carousel

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

1- Bootstrap Carousel

Carousel (Carrousel) est similaire à une diaporama (slidershow). Il permet de mettre facilement du contenu de type image et texte en avant en changeant dynamiquement l'image d'en tête du site et son texte...Le Carousel de Bootstrap est un mélange de CSS qt un peu Javascript.
Ci-dessous, l'illustration d'un Carousel. Il permet de tourner quelques images.
Un Carousel complet obtient une structure décrit comme l'illustration ci-dessous :
Le Carousel le plus simple ne comprend que des Item (Slider) et le contenu de chaque Slider qui est une image. Il ne contient ni des contrôles (Controls) ni des Indicators.
simple-carousel-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Carousel</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h4 class="mb-3">Simple Carousel</h4>
         <div id="myCarousel" class="carousel slide border" data-ride="carousel">
            <div class="carousel-inner">
               <div class="carousel-item active">
                  <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Panther">
               </div>
               <div class="carousel-item">
                  <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Black Cat">
               </div>
               <div class="carousel-item">
                  <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
               </div>
            </div>
         </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

2- Carousel et Controls

Un Carousel normal a des butons "Next" et "Previous" qui permettent aux utilisateurs de sauter à un Slider prochain ou de reculer à un Slider précédent. Ils sont appelés des Contrôles (Controls).
Carousel with Control

<div id="myCarousel" class="carousel slide border" data-ride="carousel">
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
      </div>
   </div>
   <!-- Controls -->
   <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
</div>
L'exemple de personnalisation de Controls :
Custom Controls

 .carousel-control-prev-icon {
     background-image: url(../images/previous-32.png);
     width: 32px;
     height: 32px;
}
 .carousel-control-next-icon {
     background-image: url(../images/next-32.png);
     width: 32px;
     height: 32px;
}

3- Carousel et Indicators

Indicators comme des Shortcut permet aux utilisateurs de sauter à un Item (Slider) précis dans la liste des Item du Carousel. Remarque : Les Item dans Carousel sont indexés (index) de 0 (0, 1, 2,..)
Carousel Indicators

<div id="myCarousel" class="carousel slide border" data-ride="carousel">
   <!-- Indicators -->
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>

   ...

</div>
Carousel Indicators

<div id="myCarousel" class="carousel slide border" data-ride="carousel">
   <!-- Indicators -->
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
      </div>
   </div>
   <!-- Controls -->
   <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>
</div>
Ci-desous quelques exemple de la personnalisation des Indicators.
Custom Indicators (1)
Custom Indicators (1)

.carousel-indicators li {
  width: 20px;
  height: 20px;
  border-radius: 100%;
}
Custom Indicators (2)
Custom Indicators (2)

 .carousel-indicators li {
     text-indent: 0px;
     text-align: center;
     color: red;
     margin: 0 2px;
     width: 30px;
     height: 30px;
     border: none;
     border-radius: 100%;
     line-height: 30px;
     background-color: #999;
     transition: all 0.25s ease;
}
 .carousel-indicators .active, .hover {
     margin: 0 2px;
     width: 30px;
     height: 30px;
     background-color: #337ab7;
}
Custom Indicators (2)

<div id="myCarousel" class="carousel slide border" data-ride="carousel">
   <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active">1</li>
      <li data-target="#myCarousel" data-slide-to="1">2</li>
      <li data-target="#myCarousel" data-slide-to="2">3</li>
   </ol>
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Panther">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Black Cat">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
      </div>
   </div>
   <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
   </a>
</div>
Custom Indicators (3)
Cutom Indicators (3)

.carousel-indicators {
     position: absolute;
     bottom: 0;
     margin: 0;
     left: 0;
     right: 0;
     width: auto;
}
.carousel-indicators li, .carousel-indicators li.active {
     float: left;
     width: 33%;
     height: 10px;
     margin: 0;
     border-radius: 0;
     border: 0;
     background: #ccc;
}
.carousel-indicators li.active {
     background: orange;
}

4- Carousel et la légende (Caption)

Pour chaque Slider vous pouvez ajouter des légendes (Caption). Il est facile à le faire en enveloppant votre contenu de légende dans l'étiquette <div class="carousel-caption">.
Carousel Item with Caption!

<div class="carousel-item">
   <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">

   <!--Caption here -->
   <div class="carousel-caption">
      <h5>Black Cat</h5>
      <small>
      A black cat is a domestic cat with black fur that may be a mixed or specific breed
      </small>
   </div>

</div>
Carousel with caption

<div id="myCarousel" class="carousel slide border" data-ride="carousel">
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
         <div class="carousel-caption">
            <h5>Leopard</h5>
            <small>
            A black Panther is the melanistic color variant of any big cat species.
            Black Panthers in Asia and Africa are leopards (Panthera pardus).
            </small>
         </div>
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
         <div class="carousel-caption">
            <h5>Black Cat</h5>
            <small>
            A black cat is a domestic cat with black fur that may be a mixed or specific breed
            </small>
         </div>
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
         <div class="carousel-caption">
            <h5>Lion</h5>
            <small>
            The lion (Panthera leo) is a species in the cat family (Felidae).
            A muscular, deep-chested cat, it has a short, rounded head, a reduced neck and round ears
            </small>
         </div>
      </div>
   </div>
   <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
   </a>
</div>
Les légendes devraient être affichées sur des appareils dont la largeur d'écran est grande. Pour des équipements d'écran trop petit, vous pouvez les cacher, ce qui peut être réalisé avec le support de la classe .d-(sm|md|lg|xl)-block, .d-none.
ClasseDescription
.d-sm-block .d-noneCaption va afficher si la largeur de l'écran de Carousel est >= 567px. Inversement, elle sera cachée.
.d-md-block .d-noneCaption va afficher si la largeur de l'écran de Carousel est >= 768px. Inversement, elle sera cachée.
.d-lg-block .d-noneCaption va afficher si la largeur de l'écran de Carousel est >= 992px. Inversement, elle sera cachée.
.d-xl-block .d-noneCaption va afficher si la largeur de l'écran de Carousel est >= 1200px. Inversement, elle sera cachée.
carousel-responsive-caption-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Carousel</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container-fluid">
         <h4 class="mb-3">Responsive Carousel with Caption</h4>
         <p>.carousel-caption .d-none .d-sm-block</p>
         <div id="myCarousel" class="carousel slide border" data-ride="carousel">
            <div class="carousel-inner">
               <div class="carousel-item active">
                  <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
                  <div class="carousel-caption d-none d-sm-block">
                     <h5>Leopard</h5>
                     <small>
                     A black Panther is the melanistic color variant of any big cat species.
                     Black Panthers in Asia and Africa are leopards (Panthera pardus).
                     </small>
                  </div>
               </div>
               <div class="carousel-item">
                  <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
                  <div class="carousel-caption d-none d-sm-block">
                     <h5>Black Cat</h5>
                     <small>
                     A black cat is a domestic cat with black fur that may be a mixed or specific breed
                     </small>
                  </div>
               </div>
               <div class="carousel-item">
                  <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
                  <div class="carousel-caption d-none d-sm-block">
                     <h5>Lion</h5>
                     <small>
                     The lion (Panthera leo) is a species in the cat family (Felidae).
                     A muscular, deep-chested cat, it has a short, rounded head,
                     a reduced neck and round ears
                     </small>
                  </div>
               </div>
            </div>
            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
         </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

5- Effet (Effect)

Ajoutez la classe .carousel-fade au Carousel, vous verrez l'effet fade (Pâlir) lorsque le Carousel transfère de ce Slider à un autre Slider.
.carousel-fade

<div id="myCarousel" class="carousel carousel-fade slide border" data-ride="carousel">
   <div class="carousel-inner">
      <div class="carousel-item active">
         <img class="d-block w-100" src="../images/carousel-img-1.jpg" alt="Leopard">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-2.jpg" alt="Cat">
      </div>
      <div class="carousel-item">
         <img class="d-block w-100" src="../images/carousel-img-3.jpg" alt="Lion">
      </div>
   </div>
   <!-- Controls -->
   <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
   </a>
   <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
   </a>
</div>

6- Des options pour Carousel

Il y a quelques options que vous pouvez appliquer au Carousel, par exemple, définissez la durée lorsque le Carousel suspend temporairement avant de passer au Slider suivant. Les paramètres permet au Carousel de se tourner (cycle) ou non ....
TODO!!
Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.