Bootstrap5 rotation
Rotation is a circular slide show:
How to create a carousel
The following example creates a simple image rotation effect:
Example
<!-- 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>
<!-- Rotating pictures -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" class="d-block" style="width:100%">
</div>
</div>
<!-- Left and right switch 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>
Add a description to the rotated picture
In each <div class="carousel-item"> add inside <div class="carousel-caption"> to set the description text of the rotated picture:
Example
<div class="carousel-item">
<img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Title of the first image description</h3>
<p>The content of the first image description is displayed here！！！</p>
</div>
</div>
The class description used in the above example
Class |
Description |
|---|---|
|
Create a carousel |
|
Add an indicator to the rotation, that is, the dots at the bottom of the rotation chart, and the process of rotation can show the current number of pictures. |
|
Add a picture to switch |
|
Specify the content of each picture |
|
Add the button on the left and click to return to the previous one. |
|
Add the button on the right and click to switch to the next one. |
|
Used with .carousel-control-prev, set the button on the left |
|
Used with .carousel-control-next, set the button on the right |
|
Toggle the transition and animation effects of the picture, and if you don’t need this effect, you can delete this class. |