For detail documentation, View Carousel on Bootstrap⟶
Basic Example
<div class="carousel slide" id="carouselExample">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100 d-block" src="../assets/images/gallery-1.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/gallery-6.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/header-temp.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/herbal-header.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/herbal-1.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/herbal-2.jpg" alt="" />
</div>
</div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button><button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>Indicators
<div class="carousel slide" id="carouselExampleIndicators">
<div class="carousel-indicators"><button class="active" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-current="true" aria-label="Slide 2"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-current="true" aria-label="Slide 3"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-current="true" aria-label="Slide 4"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" aria-current="true" aria-label="Slide 5"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5" aria-current="true" aria-label="Slide 6"></button></div>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100 d-block" src="../assets/images/gallery-1.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/gallery-6.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/header-temp.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/herbal-header.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/herbal-1.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/herbal-2.jpg" alt="" />
</div>
</div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>Autoplay
<div class="carousel slide" id="carouselExampleAutoPlaying" data-bs-ride="carousel">
<div class="carousel-indicators"><button class="active" type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide-to="1" aria-current="true" aria-label="Slide 2"></button><button type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide-to="2" aria-current="true" aria-label="Slide 3"></button><button type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide-to="3" aria-current="true" aria-label="Slide 4"></button><button type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide-to="4" aria-current="true" aria-label="Slide 5"></button><button type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide-to="5" aria-current="true" aria-label="Slide 6"></button></div>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100 d-block" src="../assets/images/gallery-1.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/gallery-6.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/header-temp.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/herbal-header.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/herbal-1.jpg" alt="" />
</div>
<div class="carousel-item">
<img class="w-100 d-block" src="../assets/images/herbal-2.jpg" alt="" />
</div>
</div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoPlaying" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>