html - Bootstrap carousel not working with angular

Question

I have angular project which requires the use of bootstrap carousel of images. but it is just showing the first slide and not changing automatically or using the previous and next buttons as well. here is my code

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active height-80">
            <img class="d-block w-100" src="assets/images/26.PNG" alt="First slide">
        </div>
        <div class="carousel-item height-80">
            <img class="d-block w-100" src="assets/images/27.PNG" alt="Second slide">
        </div>
        <div class="carousel-item height-80">
            <img class="d-block w-100" src="assets/images/28.PNG" alt="Third slide">
        </div>
    </div>
    <span class="carousel-control-prev" data-target="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </span>
    <span class="carousel-control-next" data-target="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </span>
</div>

question from:https://stackoverflow.com/questions/65881641/bootstrap-carousel-not-working-with-angular

Answer 1

Since the tag looks like you're using Angular you can use the component Carousel angular style ngb-carousel:

<ngb-carousel *ngIf="items" class="carousel-fade">
  <ng-template ngbSlide *ngFor="let item of items">
    <!-- ... -->
  </ng-template>
</ngb-carousel>

The version you are using I think is the generic one in javascript which may be less compatible than this one.

You can get several ideas and examples from here:

https://ng-bootstrap.github.io/#/components/carousel/examples

https://stackblitz.com/run?file=src%2Fapp%2Fcarousel-basic.html