Search code examples
angulartypescriptionic2ionic3

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>

Solution

  • 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