Question

我有角度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作为此帖的时间。您可以查看已解决的问题here。

如果我们深入了解源代码，li此处in this line中没有动态模板。

新答案

我为此提出了解决方法。在ng-bootstrap source code和api documentation上进行检查后，您可以看到ngb-carousel接受activeId输入。因此，我们可以创建一种方法，将点击的照片缩略图传递给ngb-carousel。

最重要的部分是：

将输入属性[activeId]放在ngb-carousel
中
<ngb-carousel class="myCarousel" [activeId]="activeSliderId"></ngb-carousel>
点击缩略图时创建点击事件

<li class="thumbnail" (click)="cycleToSlide(photo)"></li>
点击缩略图时调用的方法

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>

在ng-bootstrap旋转木马的图像缩略图

1 个答案: