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

【问题标题】：Swiper autoplay not working in Angular (single slide)Swiper 自动播放在 Angular 中不起作用（单张幻灯片）
【发布时间】：2021-06-24 07:54:38
【问题描述】：

我正在使用带角度的 swiperjs (v 12)，我想为每张幻灯片设置特定的延迟。我已经从“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 方法可以将此延迟分配给单个幻灯片，在文档中是未指定..

【问题讨论】：

标签： angular swiper swiperjs

【解决方案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;}

【讨论】：

【解决方案2】：

我通过以下方式解决了。你应该得到滑动元素的引用：

//**** HTML:
<swiper [config]="config" #swiperSlideShow>...</swiper>


//**** .ts component:
import SwiperCore, {Autoplay} from 'swiper';
SwiperCore.use([Autoplay]);
import { SwiperComponent } from 'swiper/angular';
//...
  @ViewChild('swiperSlideShow') swiperSlideShow!: SwiperComponent;
  config: SwiperOptions = {};
        
  constructor() {}

  ngOnInit(): void {}
        
  ngAfterViewInit(): void
  {
    this.config = {
      //...
      autoplay: {
        delay: 6000,
        disableOnInteraction: false
      }
    }
    
    // Start autoplay
    this.swiperSlideShow.swiperRef.autoplay.start();
  }

注意：如果您要在 SwiperOptions 中使用额外的选项（例如断点），那么您必须使用 ngAfterContentInit 而不是 ngAfterViewInit。

【讨论】：