技術標籤：筆記jsionic輪播ion-slides

html

<ion-slides pager="true" [options]="slidersOpts" class="top-slides" (ionSlideDidChange)="slideDidChange($event)" #slides>
    <ion-slide *ngFor="let banner of banners">
        <!--輪播圖尺寸是16：9-->
        <
 
img [src]=banner?.advertImgUrl alt=""/>
    </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 slides
    this.slider.getActiveIndex()
        .then(async (activeIndex: number) => {
            const slideCount =
 
 await this.slider.length();
            if (activeIndex === slideCount - 1) {
                this.slider.slideTo(1, 0);
            }
            if (activeIndex === 0) {
                this.slider.slideTo(slideCount - 2, 0);
            }
        });
}