Ionic 3 image slider autoplay works well, but when I slide the image manually the autoplay stops working. Below is my ionic 3 code. I am really stuck here..
slideData = [{ image: "../../assets/img1.jpg" },{ image: "../../assets/img2.jpg" },{ image: "../../assets/img3.jpg" }]
html code is as below
<ion-slides class="slide-css" autoplay="100" loop="true" speed="100" pager="true" autoplayDisableOnInteraction = "false">
<ion-slide *ngFor="let slide of slideData">
<img src="{{slide.image}}" />
</ion-slide>
</ion-slides>
If someone finds a solution for Ionic 4/5, to restart the slider after manual sliding just define like this:
slideOptsOne = {
initialSlide: 0,
slidesPerView: 1,
autoplay: {
disableOnInteraction: false
}
};
HTML:
<ion-slides [options]="slideOptsOne" color="tertiary">
Reference: https://swiperjs.com/api/#autoplay Cheers
Update:
You need to use it like this:
import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular';
@ViewChild(Slides) slides: Slides;
constructor(private navCtrl: NavController, private navParams: NavParams) {
}
ionViewDidEnter() {
this.slides.autoplayDisableOnInteraction = false;
}
Note: You need to remove autoplayDisableOnInteraction = "false"
on html
page.
Old Answer:
You can use autoplayDisableOnInteraction = "false"
as shown below.
<ion-slides class="slide-css" autoplay="100" loop="true" speed="100"
pager="true" autoplayDisableOnInteraction = "false">
</ion-slides>
See how it implements on Ionic
Swiper API
disableOnInteraction boolean true Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With