イオン2スライド自動再生

Question

イオン2を使用しています。

は、ここでそれは私がするとき、最後のスライドに継続しないループを必要とするperfect.But仕事だ私のテンプレート

<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> 

です。

どうすればいいですか？

親切

おかげ

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(); 
    } 
    } 

希望。