Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ionic 3 image slider stops autoplay after manual sliding

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>
like image 442
Sanchit Mahajan Avatar asked Dec 06 '17 17:12

Sanchit Mahajan


2 Answers

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

like image 63
Snowbases Avatar answered Sep 19 '22 19:09

Snowbases


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

like image 26
Sampath Avatar answered Sep 22 '22 19:09

Sampath