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>

这是完美的工作.但我需要循环不会继续上次幻灯片.

我怎样才能做到这一点.

请告诉我,

谢谢

Answer 1

所以我在离子2文档中使用了一些辅助函数来进行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();
    }
  }

希望这可以帮助.