I am trying to make a carousel. This carousel image gets its imagepath string from a string array. when i click left or right arrow I want it to increase or decrease index, so i can change image which is shown. how can i mak this happen. NO ts code allowed, only html can be used.

 <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">               
        <ul  *ngFor="let carImagePath of carImagePaths; let i= index;first as isFirst">
          <div [ngClass]="isFirst ? 'carousel-item active' : 'carousel-item' "> 
            <li><img [src]="imageUrl+carImagePath" class="d-block w-100" alt="..."></li> 
          </div>
        </ul> 
        </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
      </div>
 </div>