Angular ng引导中旋转木马的图像缩略图

我在angular 4中有一个旋转木马，我正在使用ng引导。我想改变指标，使他们像缩略图

这是我目前的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>

第一张幻灯片标签
自由精英的生命，自由的法雷特拉·奥古斯·莫利斯

第二张幻灯片标签
Lorem ipsum dolor sit amet，是一位杰出的献身者

第三张幻灯片标签
这是一个伟大的共产主义者

旧答案

我在搜索类似功能时遇到了你的问题。不幸的是，我们无法将

转盘指示器

自定义为本帖发布时间。您可以查看打开的问题

如果我们深入研究源代码，这里的

li

中没有动态模板

新答案

我已经想出了解决办法。检查

ng引导程序

和后，您可以看到

ngb转盘

accept

activeId

输入。因此，我们可以创建一种方法，将单击的照片缩略图传递到

ngb旋转木马

最重要的部分是：

将输入属性

[activeId]

放入ngb转盘

单击缩略图时创建单击事件

方法在单击缩略图时调用

cycleToSlide（照片）{
this.activeSliderId=“ngb slide-”+photo.id；
}

您可以看到下面的示例

导出类组件{
活动幻灯片；
自行车滑梯（照片）{
控制台日志（photo.id-1）；
设slided=photo.id-1；
this.activeSliderId=“ngb slide-”+slideId；
}
}

.carousel缩略图{
列表样式类型：无；
填充：0；
保证金：1雷姆0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.carousel-缩略图项目{
光标：指针；
}
.carousel-thumbnail\uu img{
宽度：80px；
高度：60px；
}