Ionic 2 slides autoplay

Question

I am using ionic2.

Here is my template

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

It's work perfect.But i need loop does not continue on when last slide.

How can i do this.

Kindly advice me,

Thanks

Answer 1

You can have a configuration for an Ionic Slide

Complete Source: 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>

Component

With AutoPlay Set to true

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

Answer 2

So i used some of the helper functions on the ionic 2 documentation for sildes.

The (ionSlideDidChange)="slideChanged()" handles the slides autoplay, so when the slide reaches 3 which is your maximum, i stop the autoplay using this.slides.stopAutoplay();.

The html is as:-

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

The ts is as:-

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

Hope this helps.