slides 实现轮播图

    1. slidesType = {
    2.      effect: 'flip',
    3.         speed: 400,
    4.         loop:true,
    5.         autoplay: {
    6.         delay: 2000
    7.    }
    8. }
    10. <ion-slides pager="true" [options]="slidesType">
    11.     <ion-slide>
    12.         第一个
    13.     </ion-slide>
    14.     <ion-slide>
    15.         第二个
    16.     </ion-slide>
    17.     <ion-slide>
    18.         第三个
    19.     </ion-slide>
    20. </ion-slides>

    调用方法实现轮播

    1. <ion-slides pager="true" #slide>
    2.     <ion-slide>
    3.         <h1>Slide 1</h1>
    4.     </ion-slide>
    5.     <ion-slide>
    6.         <h1>Slide 2</h1>
    7.     </ion-slide>
    8.     <ion-slide>
    9.         <h1>Slide 3</h1>
    10.     </ion-slide>
    11. </ion-slides>
    1. import { Component, OnInit,ViewChild } from '@angular/core';
    3. @ViewChild('slide') slide;
    5. doSlide(){
    6.     this.slide.slideNext();
    7. }

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

    1. <ion-slides pager="true" [options]="slideOpts" #slideDong (ionSlideTouchEnd)="slideZiDong()">
    2.     <ion-slide>
    3.         <img src="/assets/002.png" alt="">
    4.     </ion-slide>
    5.     <ion-slide>
    6.         <img src="/assets/001.png" alt="">
    7.     </ion-slide>
    8. </ion-slides>
    10. slideZiDong(){
    11.     this.slideDong.startAutoplay();
    12. }