(Ionic 2) Keep auto play in slides when the slide is swiped - ionic-framework

Question

i have the slider like this:
<ion-slides #promoSlider [options]="homeOptions" (change)="onPromoSlideChanged()" >
<ion-slide *ngFor="let promo of promos">
<img *ngIf="promo" src="{{promo.image}}" style="width:300px;height:300px;margin:auto;display:block" >
</ion-slide>
</ion-slides>
I have use this options to keep my slide playing using auto play:
homeOptions = {
initialSlide: 0,
loop: true,
autoplay:2000
};
But the problem is when i swipe the slider the auto play is stopped and the slider is not sliding again. How to keep the slider playing even i swipe the slider. I have try this code:
onPromoSlideChanged() {
alert('ABC');
this.promoSlider.options = this.homeOptions;
this.promoSlider.rapidUpdate();
//What should i do in this method?
};
What event i need to keep the slider slide again (keep playing) when i swipe the slider ? Thanks...

Answer 1

You can find your answer here => https://forum.ionicframework.com/t/how-to-keep-slides-auto-play-when-the-slides-is-swiped/54025/6
The official docs reference the component Swiper as the base of the ion-slides component, so the API should be the same as the one described in http://idangero.us/swiper/api/11.
You could use the option autoplayDisableOnInteraction to avoid disabling auto play after the user interaction.
Your options array should be:
homeOptions = {
initialSlide: 0,
loop: true,
autoplay:2000,
autoplayDisableOnInteraction: false
};
Hope it helps.

Answer 2

$scope.images = {"status":true,"msg":"2 record(s) found","sliders":[{"title":"slider 1","content":"test
value","weblink":null,"image":"http:\/\/192.168.8.54\/test\/media\/mbimages\/a\/m\/test.jpg"},{"title":"Slider
2","content":null,"weblink":null,"image":"http:\/\/192.168.8.54\/test\/media\/mbimages\/
a\/m\/test.png"}]}
<ion-slide-box delegate-handle="img-viewer" options="options" does-continue="true" loop="true" auto-play="true" slide-interval="5000" >
<ion-slide ng-repeat="nt in images" ng-if="nt.slider_position == '1'" >
<div class="box"><img ng-src="{{nt.image}}" style="width:400px;height:200px;margin:auto;display:block"/></div>
</ion-slide>
</ion-slide-box>
**Controller**
$scope.counter = 0;
$interval(function ()
{
if($scope.counter == $ionicSlideBoxDelegate.$getByHandle('img-viewer').currentIndex() + 1)
{
$ionicSlideBoxDelegate.$getByHandle('img-viewer').slide(0);
}
else{
$ionicSlideBoxDelegate.$getByHandle('img-viewer').update();
}
}, 2000);
angular.forEach($scope.images, function(value, key){
if(value.slider_position == "1")
{
$scope.counter++;
}

Answer 3

Using Observable works for your scenario. You can use it as -
import {Observable} from 'Rxjs/rx';
// in class -
#ViewChild(Slides) slides: Slides;
ionViewDidEnter() {
//you get slider data from any web service
this.sliderObservable = Observable.interval(3000).subscribe(x => {
this.autoPlaySlider();
// or you can do this, it will start autoplay at every 3 seconds
// this.slides.startAutoplay();
});
}
autoPlaySlider(){
var slider_index = this.slides.getActiveIndex();
if(slider_index < this.sliderData.length){
this.slides.slideTo(slider_index+1);
}
else{
this.slides.slideTo(0);
}
}
ionViewDidLeave(){
this.sliderObservable.unsubscribe();
}
You can find more reference Here