How to keep slides auto play when the slides is swiped?

Ionic Framework ionic-v3
1

How to create the slides that keep auto play and still auto play when i swipe the slides. The slides is auto playing but when i swipe the slide, the slides is stopping slide. Thanks.
Here is my codes:

Html:
    <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>

home.ts:
    homeOptions = {
        initialSlide: 0,
        loop: true,
        autoplay:2000
      };

 onPromoSlideChanged() {
      alert('ABC');
      this.promoSlider.options = this.homeOptions;
      this.promoSlider.rapidUpdate();
      //What should i do in this method?

  };
2 Likes
2

never used this component but maybe you can check if the loop property is still set to true in your onPromoSlideChanged() method. If it’s not maybe set it to true again. If it still true maybe that’s the way they develop the component.

3

Yes maybe that’s the component like that. So what is correctly way to create the slides that auto play and then keep sliding even i swipe the slides? Anybody?

4

Can somebody give me the example of using ionic slides with auto play keep playing while the slides is swiped?

5

on the official example it does exactly what you’re saying so I don’t think this can be done without any tweaks.

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/.

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.

4 Likes
7

Thank you very much.
Can i ask more? I have more problem. So i need to have dynamic slides. So i have three buttons. Each buttons A, B, C give different contents. I have successfully create that but sometimes it is have bug. When i click button to get different content there is bug the slides (example have 3 images) The first one is skipped in end loop and sometimes the first image from other data from other content is still exist (So if i move from content A (Have 3 images) to content B (have 3 images). The slides have 4 images (the first one is from A but the first one from B is skipped). Here is the example method in each buttons:

 loadFeatured(){
    this.featuredService.loadFeatured()
    .then(dataFeatured => {
      this.featureds = null;
      this.featureds = dataFeatured;
      this.featuredSlider.ngOnDestroy();
      this.featuredSlider.ngOnInit();
    });
    };

How to correctly initializing again the slider and data ? Thanks…

1 Like
8

I also want to dynamically change extraOptions keys and value pairs. How to do? My tests are not working ,e.g.:

public extraOptions = {
            // http://idangero.us/swiper/api/
            initialSlide: 0,
            loop: false,
            pager: true,
            noSwiping: false
	    }

 @ViewChild('transactionSlider')   slider:               Slides

public doThis(){
    this.slider['noSwiping'] = true
}
9

This is my workaround to get my slider auto play even after slides were swiped.

import {Observable} from 'Rxjs/rx';

ionViewDidEnter() {
  ...... //you get slider data from any web service
  this.sliderObservable = Observable.interval(3000).subscribe(x => {
        this.autoPlaySlider();
   });
}
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();
}
1 Like
10

Solution:
(ionSlideTouchEnd)=“slideChanged()” inside ion slides

slideChanged(){
    console.log("slide changed.");
    this.slides.startAutoplay();
  }
1 Like