Ionic-framework: bug: ionic 4 ion-slide set initialSlide not work immediately

[tajinder-logiciel]

Bug Report

Ionic version:


[x] 4.10.0

Current behavior:
When I want to set initialSlide, but it's still shows default value first, then change to value that I set

Expected behavior:
It should not show first image

Steps to reproduce:
Start project and then refresh home page

Related code:
Home.page.ts file

slider = [
    'assets/images/download copy.jpg',
    'assets/images/download-2 copy.jpg',
    'assets/images/download-1 copy.jpg',
    'assets/images/download copy.png',
    'assets/images/download-1.jpg',
    'assets/images/download-3 copy.jpg',
    'assets/images/download-2.jpg',
    'assets/images/download-4.jpg',
    'assets/images/download-3.jpg',
    'assets/images/download-5 copy.jpg',
    'assets/images/download-6 copy.jpg',
    'assets/images/download-8 copy.jpg',
    'assets/images/download-4 copy.jpg',
    'assets/images/download-7 copy.jpg',
  ]

  slideOpts = {
        initialSlide: 10,
        speed: 400
  }

home.page.html file

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-slides pager="true" [options]="slideOpts" style="height: 95%">
        <ion-slide *ngFor="let img of slider;let i = index">
            {{i}}
            <img [src]="img" (error)="$event.target.src = 'assets/images/download.png'" />
        </ion-slide>
    </ion-slides>
</ion-content>

Github repo: - https://github.com/tajinder-logiciel/slider-issue

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.7 (/Users/tajinder/.nvm/versions/node/v12.8.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.10.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8 

System:

   Android SDK Tools : 26.1.1 (/Users/tajinder/Library/Android/sdk)
   NodeJS            : v12.8.0 (/Users/tajinder/.nvm/versions/node/v12.8.0/bin/node)
   npm               : 6.10.2
   OS                : macOS Mojave

[tajinder-logiciel]

Is anyone looking into this

[luis-don-dev]

I'm having the same issue in @ionic/angular ^4.10.0, when I set:

it doesn't go inmediately to the desired slide, it shows the first slide and then it load the desired index, I guess a workaround can be to show a skeleton text and show slide when it loads but I cannot find how it can be achieved, hope someone has faced it and did something that works, for now it's annoying

[rajiramamoorthi]

Any solutions for this issue

[luis-don-dev]

What I ended doing is:

In my gallery page I define @ViewChild('slides', {static: true}) slides: IonSlides;

then in ionViewWillEnter I navigate to desired index and set a 0 delay to disable animation like this:

ionViewWillEnter(){
this.slides.slideTo(this.imageIndex, 0).then(() => {
setTimeout(() => {
this.loading = false;
}, 250);
});
}

I also set a little timeout, this way I'm no longer seeing the first image and then the desired image, hope it helps!

[agrinko]

I have the same issue. Very annoying :(

[rajiramamoorthi]

Any update on this issue

[signuspl]

In Ionic v.5 still same issue. Tried to use [hidden] to wait some time for component initialization but it didn't change anything. I use it to make (simple) login/signup modal window in my app so it is not typical slider example but I ended with adding empty slide at the beginning <ion-slide><ion-slide> so it looks great now without the flashing effect of the 0 slide cause it's empty - but it is not good solution for any use case so it is just my trivial solution :) hope you find better one!

[oplengs001]

same issue!

[ghost]

my solution is just make a manual init, according to the documentation swiperjs
@ViewChild('slider', { static: true }) slides: IonSlides;
public slideOpts = { init: false, initialSlide: 2, speed: 400, allowTouchMove: false };

ionViewDidEnter(): void {
this.slides.getSwiper().then(sw => sw.init()).then(() => {
this.slides.slideTo(2, 0);
});
}

[anthonyjuarezsolis]

It didn't work for me either (or so I thought), so I tried putting it in the initial position 0 and it worked hahaha here is the solution:
slideOpts = { initialSlide: 0, speed: 400 };

[mybluedog24]

I found a few old issues related to this. Looks like this is a bug long time ago and should be fixed. I'm still using Ionic 3 and have no options setting, so I can't use Miguel08241993's solution. But I found a workaround here: https://github.com/ionic-team/ionic/issues/7595

Go to node_modules/ionic-angular/components/slides/slides.js (around line 783). Remove the timeout wrapping the _this._initSlides();:

    /**
     * @hidden
     */
    Slides.prototype.ngAfterContentInit = function () {
        var _this = this;
        // this._plt.timeout(function () {
        //     _this._initSlides();
        // }, 300);
        _this._initSlides();
    };

My version: "ionic-angular": "3.9.2"

I tried to keep the timeout but it is still flashing for a split second.