angular - ng-bootstrap 中轮播的图像缩略图

Question

我有一个 Angular 4 的轮播，我正在使用 ng-bootstrap。我想更改指标并使它们成为缩略图像 this

这是我当前的 ngb 代码

<div class="row">
    <div class="col-md-12">
        <ngb-carousel>
            <ng-template ngbSlide>
                <img class="img-fluid" src="https://lorempixel.com/900/500 r=1" alt="Random first slide">
                <div class="carousel-caption">
                    <h3>First slide label</h3>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </ng-template>
            <ng-template ngbSlide>
                <img src="https://lorempixel.com/900/500?r=2" alt="Random second slide">
                <div class="carousel-caption">
                    <h3>Second slide label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </ng-template>
            <ng-template ngbSlide>
                <img src="https://lorempixel.com/900/500?r=3" alt="Random third slide">
                <div class="carousel-caption">
                    <h3>Third slide label</h3>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </div>
            </ng-template>
        </ngb-carousel>
    </div>
</div>

Answer 1

旧答案

我在搜索类似功能时遇到了您的问题。不幸的是，我们无法自定义 carousel-indicator正如这篇文章的时间。你可以看看开的issuehere .

如果我们深入研究源代码，li 中没有动态模板。在这里in this line .

新答案

我已经想出了解决这个问题的方法。经检查ng-bootstrap source code和 api documentation ，你可以看到ngb-carousel接受activeId输入。因此，我们可以创建一个方法，将单击的照片缩略图传递给 ngb-carousel .

最重要的部分是:

1. 输入属性 [activeId]里面ngb-carousel

   <ngb-carousel class="myCarousel" [activeId]="activeSliderId"></ngb-carousel>

2. 点击缩略图时创建点击事件

   <li class="thumbnail" (click)="cycleToSlide(photo)"></li>

3. 点击缩略图时调用的方法

    cycleToSlide(photo) {
      this.activeSliderId = "ngb-slide-" + photo.id;
    }
   

您可以查看下面的示例。

export class PhotosComponent {
  activeSliderId;

  cycleToSlide(photo) {
    console.log(photo.id - 1);
    let slideId = photo.id - 1;

    this.activeSliderId = "ngb-slide-" + slideId;
  }

}

.carousel-thumbnail {
  list-style-type: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-thumbnail__item {
  cursor: pointer;
}

.carousel-thumbnail__img {
  width: 80px;
  height: 60px;
}

<ngb-carousel class="myCarousel" [activeId]="activeSliderId">
  <ng-template ngbSlide *ngFor="let photo of photos">
    <img class="slide__image" [src]="photo.src" alt="Random {{photo.name}} slide">
  </ng-template>
</ngb-carousel>

<ul class="carousel-thumbnail">
  <li class="carousel-thumbnail__item list-inline-item" *ngFor="let photo of photos" (click)="cycleToSlide(photo)">
    <a class="selected">
      <img class="carousel-thumbnail__img" [src]="photo.src">
    </a>
  </li>
</ul>