Ionic 2幻燈片自動播放

Question

我正在使用ionic2。

這裏是我的模板

<ion-slides autoplay="5000" loop="true" speed="500" pager="true"> 

    <ion-slide class="slider1"> 
      <h1>My <span>Neighbours</span></h1> 
      <p>My Neighbours is a directory of people who live in the building and have chosen to</p> 

      <div class="homepeople"> 
       <div class="home"></div> 
       <div class="people"></div> 
      </div> 
     </ion-slide> 

     <ion-slide class="slider2"> 
      <h1>CCTV <span>Monitoring</span></h1> 
      <p>Residents/Managers can view selected CCTV</p> 
      <div class="iconholder"> 
       <img src="./assets/images/white CCTV Monitoring.svg" alt="Image"> 
      </div> 
     </ion-slide> 

     <ion-slide class="slider3"> 
      <h1>Emergency</h1> 
      <p>Security/Reception/Police/Ambulance/Fire</p> 
      <div class="iconholder"> 
       <div class="iconholder-blk"> 
        <img src="./assets/images/white emergency icon.svg" alt="Image"> 
       </div> 
       <div class="iconholder-blk"> 
        <img src="./assets/images/white Alarm.svg" alt="Image"> 
       </div> 
      </div> 
      <button ion-button outline small (click)="navHome()"> 
       Start using the app 
      </button> 
     </ion-slide> 
</ion-slides> 

這是工作perfect.But我需要循環不繼續當最後一張幻燈片。

我該怎麼做。

請諮詢我，

感謝

Answer 1

所以我用一些輔助功能上ionic 2 documentation for sildes。

(ionSlideDidChange)="slideChanged()"處理幻燈片自動播放，所以當幻燈片達到3是你的最大值，我停止使用this.slides.stopAutoplay();自動播放。

的HTML是： -

<ion-slides autoplay="5000" loop="true" speed="500" pager="true" (ionSlideDidChange)="slideChanged()"> 

    <ion-slide class="slider1"> 
     <h1>My <span>Neighbours</span></h1> 
     <p>My Neighbours is a directory of people who live in the building and have chosen to</p> 

     <div class="homepeople"> 
     <div class="home"></div> 
     <div class="people"></div> 
     </div> 
    </ion-slide> 

    <ion-slide class="slider2"> 
     <h1>CCTV <span>Monitoring</span></h1> 
     <p>Residents/Managers can view selected CCTV</p> 
     <div class="iconholder"> 
     <img src="./assets/images/white CCTV Monitoring.svg" alt="Image"> 
     </div> 
    </ion-slide> 

    <ion-slide class="slider3"> 
     <h1>Emergency</h1> 
     <p>Security/Reception/Police/Ambulance/Fire</p> 
     <div class="iconholder"> 
     <div class="iconholder-blk"> 
      <img src="./assets/images/white emergency icon.svg" alt="Image"> 
     </div> 
     <div class="iconholder-blk"> 
      <img src="./assets/images/white Alarm.svg" alt="Image"> 
     </div> 
     </div> 
     <button ion-button outline small (click)="navHome()"> 
     Start using the app 
     </button> 
    </ion-slide> 
    </ion-slides> 

的TS是： -

export class HomePage { 
    @ViewChild(Slides) slides: Slides; 
    constructor() { 
    } 
    slideChanged() { 
    let currentIndex = this.slides.getActiveIndex(); 
    if(currentIndex==3){ 
     this.slides.stopAutoplay(); 
    } 
    } 

希望這有助於。