Bootstrap 5 Carousel

Carousel / Slideshow

                 <!-- 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">
     vimg src="la.jpg" alt="Los Angeles" class="d-block w-100">
    </div>
    <div class="carousel-item">
     <img src="chicago.jpg" alt="Chicago" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block w-100">
    </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>

Add Captions to Slides

Add elements inside <div class="carousel-caption"> within each <div class="carousel-item"> to create a caption for each slide:

kolkatta

We had such a great time in kolkatta!

India

this is awosome!

New Delhi

We love the Biggest city!

 <!-- 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="aaa.jpg" alt="Los Angeles" class="d-block" style="width:100%">
      <div class="carousel-caption">
        <h3>Kolkatta</h3>
        <p>We had such a great time in Kolkatta!</p>
      </div>
   </div>
    <div class="carousel-item">
      <img src="bbb.jpg" alt="India" class="d-block" style="width:100%">
      <div class="carousel-caption">
       <h3>India</h3>
        <p>Thank you, India!</p>
     </div> 
    </div>
    <div class="carousel-item">
      <img src="ccc.jpg" alt="New Delhi" class="d-block" style="width:100%">
      <div class="carousel-caption">
        <h3>New Delhi</h3>
        <p>We love the Big Apple!</p>
      </div>  
    </div>
 </div>
  
  
   <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>