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

所以我使用了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();
    }
  }

希望这有帮助。

Answer 2

您可以为离子幻灯片进行配置

完整源：Link

HTML

    <ion-slides pager="true" [options]="slideOptsOne" #slideWithNav
      (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
      <ion-slide *ngFor="let s of sliderOne.slidesItems">
        <img src="../../assets/images/{{s.id}}.jpg">
      </ion-slide>
    </ion-slides>

组件

使用自动播放设置为true

slideOptsOne = {
  initialSlide: 0,
  slidesPerView: 1,
  autoplay:true
};