Question

我正在使用带有 angular (v 12) 的 swiperjs，我想为每张幻灯片设置特定的延迟。我从'swiper/core' 导入了{Autoplay} 并调用了方法SwiperCore.use([Autoplay])。如果我为所有幻灯片设置延迟，它就可以正常工作：

.ts component
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 方法可以将此延迟分配给单个幻灯片，在未指定文档..

Answer 1

我能找到办法，试试这个：

.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;}

Swiper 自动播放在 Angular 中不起作用（单张幻灯片）

1 个答案: