Bootstrap5 Carousel
A carousel is a cyclic slideshow:
How to create a carousel
The following example creates a simple image carousel effect:
Example
<!--Carousel-->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!--Indicators-->
<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 images-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://static.jyshare.com/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="https://static.jyshare.com/images/mix/img_nature_wide.jpg" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="https://static.jyshare.com/images/mix/img_mountains_wide.jpg" class="d-block" style="width:100%">
</div>
</div>
<!--Left/right control 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>
Try it yourself »
Add descriptions to carousel images
In each<div class="carousel-item">add inside<div class="carousel-caption">to set the description text of the carousel image:
Example
<div class="carousel-item">
<img src="https://static.jyshare.com/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>First slide description title</h3>
<p>The description content of the first image is displayed here!!!</p>
</div>
</div>
Try it yourself »
Description of classes used in the above examples
| Class | Description |
|---|---|
.carousel |
Create a carousel |
.carousel-indicators |
Add an indicator to the carousel, which are the small dots below the carousel images. During the carousel process, they show which image is currently displayed. |
.carousel-inner |
Add the images to be switched |
.carousel-item |
Specify the content of each image |
.carousel-control-prev |
Add a left button, clicking it will return to the previous slide. |
.carousel-control-next |
Add a right button, clicking it will switch to the next slide. |
.carousel-control-prev-icon |
Used together with .carousel-control-prev to set the left button |
.carousel-control-next-icon |
Used together with .carousel-control-next to set the right button |
.slide |
The transition and animation effects for switching images. If you don't need these effects, you can remove this class. |