Swiper 自动播放在 Angular 中不起作用(单张幻灯片) [英] Swiper autoplay not working in Angular (single slide)

问题描述

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

.ts 组件自动播放:自动播放选项 |布尔值 = {延迟:3000，disableOnInteraction: 假}.html<swiper#swiperSlideShow[slidesPerView]=1"[spaceBetween]=50"(swiper)="onSwiper($event)";(slideChange)="onSlideChange()";[循环]=真"[自动播放]=真"[效果]="'coverflow'";[coverflowEffect]=coverflowEffect"[视差]=真"[键盘] = 键盘"[速度]=1800"><ng-模板 swiperSlide ><div ><app-slide-three></app-slide-three>

<div ><app-slide-ex></app-slide-ex>

<div ><app-slide-dy></app-slide-dy>

</ng-模板>

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

解决方案

我有办法，试试这个:

.html:

<ng-template swiperSlide *ngFor="let item of items"><div class="content">{{item.title}}</div></ng-模板></swiper>

.ts:

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

I am using swiperjs with angular (v 12) and I would like to set specific delay for each slide. I 've imported {Autoplay} from 'swiper/core' and called the method SwiperCore.use( [Autoplay]). If I set a delay for all slides, it works fine:

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

But 'data-swiper-autoplay' is ignored and <ng-template swiperSlide data-swiper-autoplay="5000" > keeps the default value of delay (3000) and I dont know if there is a specific Angular way to assign this delay to a single slide, in the documentation is not specified..

解决方案

I could find a way, try this:

.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 中不起作用(单张幻灯片)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！