<ion-slidespager="true"[options]="slidersOpts"class="top-slides"(ionSlideDidChange)="slideDidChange($event)"#slides><ion-slide*ngFor="let banner of banners"><!--轮播图尺寸是16:9--><img[src]=banner?.advertImgUrlalt=""/></ion-slide></ion-slides>
ts
import{ViewChild}from'@angular/core';import{IonSlides}from'@ionic/angular';
@ViewChild('slides') slider: IonSlides;/**
* 头部轮播图
*/
slidersOpts ={
slidesPerView:1,
initialSlide:0,
speed:400,
loop:true,
zoom:false,
autoplay:{
delay:5000,
disableOnInteraction:false},};slideDidChange(event){// first and last slides are duplicate slidesthis.slider.getActiveIndex().then(async(activeIndex: number)=>{const slideCount =awaitthis.slider.length();if(activeIndex === slideCount -1){this.slider.slideTo(1,0);}if(activeIndex ===0){this.slider.slideTo(slideCount -2,0);}});}