Documentation
Carousel
A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
Default markup
Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.
<div id="carousel-sample" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carousel-sample" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carousel-sample" data-bs-slide-to="1" class=""></li>
<li data-bs-target="#carousel-sample" data-bs-slide-to="2" class=""></li>
<li data-bs-target="#carousel-sample" data-bs-slide-to="3" class=""></li>
<li data-bs-target="#carousel-sample" data-bs-slide-to="4" class=""></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" alt="" src="...">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="...">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="...">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="...">
</div>
<div class="carousel-item">
<img class="d-block w-100" alt="" src="...">
</div>
</div>
<a class="carousel-control-prev" href="#carousel-sample" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-sample" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>