Question

我有一个angular5应用程序，其中一个页面实现了ngx-bootstrap轮播组件，使用默认的[noPause]属性暂停滚动图像操作，这很正常。

当我使用下一个或上一个按钮控件单击幻灯片时，幻灯片的自动滚动会再次启动，因此每次单击时，轮播会一次跳过两个图像，因此鼠标悬停在轮播上的事实将被忽略。 / p>

旋转木马的演示版似乎有类似的问题（https://valor-software.com/ngx-bootstrap/#/carousel#pause-on-hover），但我不确定点击幻灯片时是否可以重新设置noPause值？不确定是否有人会知道这是否可能？

这是我对旋转木马的实现：

<carousel [noPause]="false">
  <slide *ngFor="let item of carouselItems">
    <img [src]="item.mediaFileURL | safeUrl" />
  </slide>
</carousel>

由于

Answer 1

事实证明，轮播代码将触发（mouseup）事件上轮播的play（），当单击next / prev按钮时触发。所以我能够在轮播周围添加一个包装来覆盖事件并改为运行轮播的pause（）函数。

<div (mouseenter)="setPause()" (mouseleave)="setPlay()" (mouseup)="setPause()">

我能够通过在我的打字稿文件中添加对使用者的主管的引用来运行轮播上的功能：

@ViewChild('carousel') carousel: CarouselComponent;

setPlay(): void {
    this.carousel.play();
}
setPause(): void {
    this.carousel.noPause = false;
    this.carousel.pause();
}

希望这有助于某人。

Answer 2

尝试activeSlideChange听取滑块事件并将noPause设置为false

<carousel (activeSlideChange)="noPause = false" [noPause]="false">

当点击下一个/上一个按钮时，ngx-bootstrap轮播暂停在悬停时丢失

2 个答案: