Ionic4 learning notes 10 rotation map of an East Project

1、 Page component definition

<ion-content>
  <!-- Shuffling figure 
      #slide1 ：  As component ID
      [options]="slidesOpts"： Corresponding ts Objects configured in slidesOpts, It belongs to component attribute configuration 
      *ngFor="let item of slidesList" ： Get backstage ts Data passed in 
      *(ionSlideTouchEnd)="slideTouchEnd()":  The method of starting after manual sliding 
  -->
  <ion-slides pager="true" #slide1 [options]="slidesOpts" (ionSlideTouchEnd)="slideTouchEnd()">
    <ion-slide *ngFor="let item of slidesList">
        <img [src]="item.pic" />
    </ion-slide>
  </ion-slides>

</ion-content>

2、 Data sources

    2.1 Pictures have been placed in src/assets Under the document

    2.2 stay tab1 Of ts Edit logic in the file

@ViewChild('slide1') slide1; // Get the id by slide1 The components of , The premise needs to be import Introduction in ViewChild

  // Properties of the carousel map 
  public slidesOpts={
    speed:400,// Time from one page to the next 
    autoplay: { 
      delay: 2000,// How often does it rotate 
    },
    loop:true // Whether to circulate 
  }

  public slidesList:any[]=[];



  constructor(){
    // Data source of rotating pictures 
    for(var i=1;i<=3;i++){
      this.slidesList.push({
        pic:'assets/slide0'+i+'.png',
        url:'',
      })
    }
  }
  // Manual sliding is completed 
  slideTouchEnd(){
      this.slide1.startAutoplay();// Set to automatic rotation 
  }

3、 Set up CSS( stay tab1 Of css In file )

// Of a carousel Css Control picture size 
  ion-slide{
  
    width: 100%;
    height: 150px;
    overflow: hidden;
    img{
      max-width: 100%;
    }
  }