我正在使用带 Angular (v 12) 的 swiperjs，我想为每张幻灯片设置特定的延迟。 我从“swiper/core”导入了 {Autoplay} 并调用了方法 SwiperCore.use([Autoplay])。 如果我为所有幻灯片设置延迟，效果很好:

// .ts component
import SwiperCore, { Autoplay } from 'swiper'

SwiperCore.use([Autoplay])

autoplay: AutoplayOptions | boolean = {
  delay: 3000,
  disableOnInteraction: false
}

// .Html 
<swiper
  #swiperSlideShow
  [slidesPerView]="1"
  [spaceBetween]="50"
  (swiper)="onSwiper($event)"
  (slideChange)="onSlideChange()"

  [loop]="true"
  [autoplay]="true"
  [effect]="'coverflow'"
  [coverflowEffect]="coverflowEffect"

  [parallax]="true"
  [keyboard] = "keyboard"
  [speed]="1800"
>

  <ng-template swiperSlide >
    <div >
        <app-slide-three></app-slide-three>
    </div>
     <div >
        <app-slide-ex></app-slide-ex>
    </div>
    <div >
        <app-slide-dy></app-slide-dy>
    </div>

  </ng-template>

但是 'data-swiper-autoplay' 被忽略并且 <ng-template swiperSlide data-swiper-autoplay="5000" >保留延迟的默认值 (3000)，我不知道是否有特定的 Angular 方法将此延迟分配给单个幻灯片，在文档中未指定..

最佳答案

我可以找到一个方法，试试这个:

.HTML:

<swiper class="mySwiper" 
[autoplay]= "{
delay: 1000*items[0].duration
}"
(slideChange)="onSlideChange($event)">
  <ng-template swiperSlide *ngFor="let item of items">
    <div class="content">{{item.title}}</div>
  </ng-template>
</swiper>

.ts:

onSlideChange(swiper: any) {
swiper.params.autoplay.delay = 1000*this.items[swiper.realIndex].duration;}

https://stackoverflow.com/questions/68111687/