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>

Sandman · Accepted Answer · 2021-01-25 10:02:09Z

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

answered Jan 25, 2021 at 10:02

Sandman

1,57910 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap carousel not working with angular

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related