Bootstrap 5 Carousel, Carousel is a recurring slide show.
How to create a Carousel
The following example creates a simple image Carousel effect:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicator -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- Carousel Pictures -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://apidemos.geek-docs.com/bootstrap/img_fjords_wide.jpg" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="https://apidemos.geek-docs.com/bootstrap/img_nature_wide.jpg" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="https://apidemos.geek-docs.com/bootstrap/img_mountains_wide.jpg" class="d-block" style="width:100%">
</div>
</div>
<!-- Left and right toggle buttons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</body>
</html>
Output:
Add a description to the Carousel image
Add <div class="carousel-item">
inside each <div class="carousel-caption">
to set the description text of the Carousel image:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap5 demos</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://apidemos.geek-docs.com/bootstrap/img_fjords_wide.jpg" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>First picture description title</h3>
<p>The first picture description content is shown here!!!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://apidemos.geek-docs.com/bootstrap/img_nature_wide.jpg" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Second picture description title</h3>
<p>The second picture description shows the content here!!!</p>
</div>
</div>
<div class="carousel-item">
<img src="https://apidemos.geek-docs.com/bootstrap/img_mountains_wide.jpg" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Third picture description title</h3>
<p>The third picture description shows the content here!!!</p>
</div>
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</body>
</html>
Output:
Description of the classes used in the above example
Class | Description |
---|---|
.carousel |
Create a Carousel |
.carousel-indicators |
Add an indicator for Carousel, which is a dot at the bottom of the Carousel diagram, and the Carousel process can show which diagram is currently the first one. |
.carousel-inner |
Add the image to be switched |
.carousel-item |
Specify the content of each image |
.carousel-control-prev |
Add the button on the left side, clicking it will return you to the previous one. |
.carousel-control-next |
Add the button on the right, clicking it will switch to the next one. |
.carousel-control-prev-icon |
Used with .carousel-control-prev to set the left button |
.carousel-control-next-icon |
Used with .carousel-control-next to set the right button |
.slide |
Transition and animation effects for switching images. If you don’t need such effects, you can delete this class. |