Question

我正在我的应用上创建bootstrap 4轮播，我的指标有问题。点击任何主题都应该导航到点击的照片，如下所示： https://getbootstrap.com/docs/4.1/components/carousel/

我不知道为什么它不起作用，引导4 js后来导入jquery所以一切都应该运行良好。

接下来的按钮，prev正在运行，但data-slide-to不是

我的代码：

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="3000">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" *ngFor="let li of sliderImages; let i = index" [attr.data-slide-to]="i" [ngClass]="{'active' : i == 0}"></li>

      </ol>
      <div class="carousel-inner">

        <div class="carousel-item"  *ngFor="let image of sliderImages; let i = index" [ngClass]="{'active': i == 0}">
          <img class="d-block w-100" [src]="image">
        </div>

      </div>
      <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

修改

当我使用示例轮播从bootstrap网站粘贴代码时，指标有效... * ngFor循环有什么问题？结构是一样的......

Answer 1

是的......我找到了解决办法......那太容易了......

Attr数据目标必须具有相同的ID，这就是为什么它不起作用......

<!-- here is the id -->
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="3000">
      <ol class="carousel-indicators">

<!-- here's second id which must be equal to first one -->

        <li data-target="#carouselExampleFade" *ngFor="let li of sliderImages; let i = index" [attr.data-slide-to]="i" [ngClass]="{'active' : i == 0}"></li>

      </ol>
      <div class="carousel-inner">

        <div class="carousel-item"  *ngFor="let image of sliderImages; let i = index" [ngClass]="{'active': i == 0}">
          <img class="d-block w-100" [src]="image">
        </div>

      </div>
      <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

Bootstrap 4轮播 - 指示灯点击不起作用（Angular 6）

1 个答案: