Correction TP les carrousels Bootstrap Ex02

Correction TP les carrousels Bootstrap Ex02

  1. Objectifs

    • Etre capable de mettre les carrousels dans les grilles en Bootstrap 4
  2. Exercice 02

    1. Énoncé



    2. Solution
      • <!DOCTYPE html>
        <html lang="en">
        <head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com
        /bootstrap/4.3.1/css/bootstrap.min.css">
          <script>$('.carousel').carousel();</script>
          <style>
              .carousel-indicators li {
        width: 10px;
        height: 10px;
        border-radius: 100%;
        }
              .carousel-control-prev-icon {
                  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg 
        xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath 
        d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
              }      
              .carousel-control-next-icon {
                  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg 
        xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath 
        d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
              }
          </style>
        </head>
        <body>
            <div class="container">
                <h1>Carrousel</h1>
                <div id="exercice02" class="carousel slide carousel-fade" data-ride="carousel">
                  
          
                  <!-- Carrousel -->
                  <div class="carousel-inner">
                    <div class="carousel-item active" data-interval="1000">
                      <img src="images/1.jpg" alt="Carrousel slide 1" class="d-block w-100">
                    </div>
                    <div class="carousel-item" data-interval="2000">
                        <img src="images/2.jpg" alt="Carrousel slide 1" class="d-block w-100">
                    </div>
                    <div class="carousel-item" data-interval="1000">
                        <img src="images/3.jpg" alt="Carrousel slide 1" class="d-block w-100">
                    </div>
                    <div class="carousel-item" data-interval="1000">
                        <img src="images/4.jpg" alt="Carrousel slide 1" class="d-block w-100">
                    </div>
                    <div class="carousel-item" data-interval="1000">
                        <img src="images/5.jpg" alt="Carrousel slide 1" class="d-block w-100">
                    </div>
                    <div class="carousel-item" data-interval="1000">
                        <img src="images/6.jpg" alt="Carrousel slide 1" class="d-block w-100">
                    </div>
                    <div class="carousel-item" data-interval="1000">
                        <img src="images/7.jpg" alt="Carrousel slide 1" class="d-block w-100">
                    </div>
                    <div class="carousel-item" data-interval="1000">
                        <img src="images/8.jpg" alt="Carrousel slide 1" class="d-block w-100">
                    </div>
                    <div class="carousel-item" data-interval="1000">
                        <img src="images/9.jpg" alt="Carrousel slide 1" class="d-block w-100">
                    </div>
                    <div class="carousel-item" data-interval="1000">
                        <img src="images/10.jpg" alt="Carrousel slide 1" class="d-block w-100">
                    </div>
                    <div class="carousel-item" data-interval="1000">
                        <img src="images/11.jpg" alt="Carrousel slide 1" class="d-block w-100">
                    </div>
                    <div class="carousel-item" data-interval="1000">
                        <img src="images/12.jpg" alt="Carrousel slide 1" class="d-block w-100">
                    </div>
                  </div>
                  
                  <!-- Contrôles -->
                  <a class="carousel-control-prev" href="#exercice02" role="button" data-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="#exercice02" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Suivant</span>
                  </a>
                </div>
              </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        
        </body>
        </html>



Abonnez vous à notre chaîne YouTube gratuitement