Correction TP les carrousels Bootstrap Ex02
Correction TP les carrousels Bootstrap Ex02
-
Objectifs
- Etre capable de mettre les carrousels dans les grilles en Bootstrap 4
-
Exercice 02
-
Énoncé
-
Solution
-
Vous pouvez visualiser l’énoncé de l’exercice
<!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>