CODEWITHSUNDEEP
htmlangular
Usman Umer
Usman Umer

Reputation: 25

Bootstrap carousel not working with angular

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>

Upvotes: 0

Views: 803

Answers (1)

Sandman
Sandman

Reputation: 1569

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

Upvotes: 1

Related Questions