Issues with ionic slides

@insightmichael wrote:

I have an issue with the slides

Originally my mark up was

<div id="slide-container">
<ion-slides autoplay="3000" loop="true" effect="fade">
<ion-slide *ngFor="let  g of sponsorGraphicsArr">
    <div *ngIf="g['iphone5GraphicURL'] && !platform.is('tablet')" class="home-bg" [style.backgroundImage]="'url(' + serverName + g['iphone5GraphicURL'] + ')' | safe: 'style'" id="background-image"></div>
    <div *ngIf="g['ipadProGraphicURL'] && platform.is('tablet')" class="home-bg" [style.backgroundImage]="'url(' + serverName + g['ipadProGraphicURL'] + ')' | safe: 'style'" id="background-image"></div>
</ion-slide>
</ion-slides>
</div>

The last slide would play twice in the loop.

(Also the second slide would pass very quickly).

Then I tried disabling the input parameters and doing it in the controller.

ngAfterViewInit(){
            setTimeout(() => {
            this.sliderIni();
            },1000)

    }

    sliderIni(){
       this.slides.effect='fade';
       this.loopSlider();
    }

    public async loopSlider() {
    let i = 0;
    while (i <= this.sponsorGraphicsArr.length) {
       await new Promise<void>(resolve => {
           setTimeout(resolve, this.sliderDelay);
       });
       this.changeSlide();
    }
    console.log('done');
}

    public changeSlide(): void {

          if(this.slides.isEnd()) {
                this.slides.slideTo(0, 300)
          }else{
               this.slides.slideNext(300);
          }
    }

This works better than the slider out of the box in that it doesn’t play the last slide twice and all the slides are evenly timed. However there is no fade effect for slideTo and slideNext.

If the first issue can be solved this would be good if not I may abandon using this plugin in favour of something custom. Any help appreciated.

Posts: 1

Participants: 1

Read full topic