如何在 angular 中的轮播几秒钟后执行下一步？

Question

我正在使用 ng2-carouselamos 轮播以使用以下代码成功显示。

<div
    ng2-carouselamos
    class="slides-wrapper"
    [items]="items"
    [width]="1200"
    [$prev]="prev"
    [$next]="next"
    [$item]="item">
  </div>

  <ng-template #prev>
    <img src="assets/images/left_arrow.png" id="left" />
  </ng-template>
  <ng-template #next>
    <img src="assets/images/right_arrow.png" id="right" />
  </ng-template>
  <ng-template #item let-item let-i="index">
    <div class="items">
      <img src="{{ item.name }}">
    </div>
  </ng-template>

和 ts 如下：

this.items = [
      { name: 'assets/images/professional_website.jpg' },
      { name: 'assets/images/nature_1200_800.jpg' },
      { name: 'assets/images/nature.jpg' },
      { name: 'assets/images/nature.jpg' },
      { name: 'assets/images/nature.jpg' }, ]

如何在 ts 中调用 [$next]="next" 5 秒后自动执行？

谢谢。

Answer 1

你的问题的根源是每 5 秒调用一个函数（下一次调用）。

如 answer 中所述：

可以使用setInterval()，参数是一样的

setInterval(function() {
  // method to be executed;
}, 5000);

因此，在您的情况下，在 ngInit 上您可以拥有这种类型的代码：

// we need to access programmatically the scroll function since it isn't exposed 
// by the library
@ViewChild(Ng2Carouselamos)
ng2Carouselamos : Ng2Carouselamos;

setInterval(function() {
  ng2Carouselamos.scroll(true,items);
}, 5000);

但是，由于您使用的库不再维护并且缺少简单的功能（例如自动滚动），我建议您选择更现代的组件库（例如 prime-ng which supports this with continuous=true ) or Ngu-Carousel

如何在 angular 中的轮播几秒钟后执行下一步？

how to execute next after few seconds for a carousel in angular?

carousel

angular2-template

angular