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，该库支持continuous = true）或Ngu-Carousel

角形旋转木马几秒钟后如何执行？

1 个答案: