Ionic 2 slides autoplay - ionic2

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

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.

Answer 2

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