简体   繁体   中英

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>

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM