ionic2 + cordova app - carousel

10.1 Official document of carousel map (welcome to join the Q group to learn and discuss together 657185219)

10.2 Using html

 

<ion-header>

  <ion-navbar>
    <ion-title>slide-pic-demo</ion-title>
  </ion-navbar>

</ion-header>
<ion-content padding class="page-home">
  <ion-slides #mySlider  (ionSlideDidChange)="slideChanged()">
    <ion-slide *ngFor="let i of iterms">
      <img src="{{i}}" >
    </ion-slide>

  </ion-slides>
</ion-content>

 The ion-slides label is our carousel component, and the #mySlider component object ionSlideDidChange represents the callback event for each carousel

10.2 Using ts

 

import {Component,ViewChild} from '@angular/core';
import {NavController,Slides} from 'ionic-angular';


@Component({
  templateUrl: 'slide-pic-demo.html'
})
export class SlidePicDemoPage {

  @ViewChild('mySlider') sliders:Slides;

 iterms = [
   "http://img3.imgtn.bdimg.com/it/u=1373023650,1548952065&fm=26&gp=0.jpg",
   "http://www.quanjing.com/image/2016index/slt3.jpg",
   "http://www.quanjing.com/image/2016index/f1.jpg"
 ];

  constructor(public navCtrl: NavController) {

  }

  ngOnInit(){//Call it after the page is loaded
    //If true, show the pager.
    / / Can display the small dots of the following page
    this.sliders.pager = true;
    //If true, continuously loop from the last slide to the first slide.
    //Refer to this property of the official website to indicate that the carousel can be cycled
    this.sliders.loop = true;
    setInterval(()=>{
        //1000: indicates the speed, true indicates that the event can be triggered
        this.sliders.slideNext(1000,true);
    },2000);
  }
  //Event triggered when carousel
  slideChanged () {
    let currentIndex = this.sliders.getActiveIndex();
    console.log('Current index is', currentIndex);
  }

}

 The effect is as follows

 
 

10.3 Supplement

 The carousel image can be played normally in this way, but there will be a problem. When the page jumps to another page and then comes back, the carousel image will not play automatically. The solution is as follows.

this.sliders.loop = true;
 // Customize the interval of playback, cancel the scheduled task
 this.sliders.autoplay = 1000;
// custom playback speed
this.sliders.speed = 1000;

// Automatically play when entering
  ionViewWillEnter() {
    this.sliders.startAutoplay();
  }
// pause when leaving
  ionViewWillLeave() {
    this.sliders.stopAutoplay();
  }