如何在 swiper.js angular 中循环播放幻灯片?

How to loop slides in swiper.js angular?

我已经按照官方文档在我的 ionic-angular 应用程序中实现了 swiper.js。但即使我给出 loop:true,幻灯片也不会循环播放。循环在第一张幻灯片停止。

这是我的配置:

    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      speed: 3000,
      loop: true,
      slidesPerView:1,
      effect: 'cube',
      grabCursor: true,
      autoHeight: false,
    }
This is my HTML :
        <swiper style="background-color: #121318;" [config]="configRestText">
            <ng-template swiperSlide *ngFor="let texts of restText">
              <p style="color: white; 
                        font-size: 1rem;">
                        <ion-icon name="information-circle-outline"></ion-icon>
                      {{texts}}</p>
            </ng-template>
        </swiper>

我用的是这样的:

TS:

 @ViewChild('swiper') swiper: SwiperComponent;

 animationInProgress = false;
  config = {
    slidesPerView: 4,
    spaceBetween: 10,
    pagination: true,
    loop: true,
  }

 ngOnInit(): void {
    this.startAnimation();
  }

   startAnimation() {
    if(this.animationInProgress) return;
    this.animationInProgress = true;
    setTimeout(() => {
      this.swiper.swiperRef.slideNext(2000);
      this.animationInProgress = false;
      this.startAnimation();
    }, 5000);
  }

  next() {
    this.swiper.swiperRef.slideNext(1000);
  }

HTML:

  <swiper #swiper [config]="config">
    <ng-template swiperSlide *ngFor="let item of items">
           ....
    </ng-template>
  </swiper>

我遵循了 IonicAcademy 教程 (here / video here) and read the swiperjs documentation (here)。