Objectifs
- Etre capable de mettre les carrousels dans les grilles en Bootstrap 4
Exercice 02
Énoncé
-
Vous pouvez visualiser l'énoncé de l'exercice
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="visually-hidden">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="visually-hidden">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>