Ionic2 离子2幻灯片自动播放

我用的是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>

它的工作完美。但我需要循环不继续时，最后一张幻灯片

我怎样才能做到这一点

请给我提个建议

---

谢谢

，所以我在上使用了一些helper函数

ionSlideDidChange=slideChanged处理幻灯片自动播放，因此当幻灯片达到最大值3时，我使用此.slides.stopAutoplay；停止自动播放

html格式如下：-

---

希望这能有所帮助。

您可以为离子载玻片进行配置

完整资料来源：

HTML

---

你是否尝试过将循环设置为false谢谢你的回复。是的，我将循环设置为false。在不自动播放之后，再次转到第一个滑块。你将始终有3个滑块吗？是的，你可以帮助我获得编码吗

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

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

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

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