ionic5 轮播图

slides 实现轮播图

slidesType = {
     effect: 'flip',
        speed: 400,
        loop:true,
        autoplay: {
        delay: 2000
   }
}

<ion-slides pager="true" [options]="slidesType">
    <ion-slide>
        第一个
    </ion-slide>
    <ion-slide>
        第二个
    </ion-slide>
    <ion-slide>
        第三个
    </ion-slide>
</ion-slides>

调用方法实现轮播

<ion-slides pager="true" #slide>
    <ion-slide>
        <h1>Slide 1</h1>
    </ion-slide>
    <ion-slide>
        <h1>Slide 2</h1>
    </ion-slide>
    <ion-slide>
        <h1>Slide 3</h1>
    </ion-slide>
</ion-slides>

import { Component, OnInit,ViewChild } from '@angular/core';

@ViewChild('slide') slide;

doSlide(){
    this.slide.slideNext();
}

手动滑动后轮播图不自动轮播的解决方法

<ion-slides pager="true" [options]="slideOpts" #slideDong (ionSlideTouchEnd)="slideZiDong()">
    <ion-slide>
        <img src="/assets/002.png" alt="">
    </ion-slide>
    <ion-slide>
        <img src="/assets/001.png" alt="">
    </ion-slide>
</ion-slides>

slideZiDong(){
    this.slideDong.startAutoplay();
}