bug: ionic slider not sticky in modal

[danielehrhardt]

Bug Report

Ionic version:

[ ] 4.x [ X] 5.x [ ] 6.x

Current behavior:

In multiple Projects, i have the Problem that the Ionic Slider is sometimes not sticky. (or it does not getting correct initialized, the dots also missing).

I can reproduce it always if i open the slider in a modal. https://ionic-angular-v5-y3m6ag.stackblitz.io

Expected behavior:

The Slider should be sticky on each slide. I can see that when i resize the window it will work again.

Steps to reproduce:

https://ionic-angular-v5-y3m6ag.stackblitz.io

Add a Slider to a page open the page with modalctrl if it does work, close the modal and open it again.

Related code:

 <ion-slides pager="true" [options]="slideOpts">
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
    </ion-slides>

https://ionic-angular-v5-y3m6ag.stackblitz.io

Other information:

Ionic info: latest angular/ionic version

[danielehrhardt]

I added now the following code. Should this be done like this?

@ViewChild(IonSlides) ionSlides: IonSlides;
ngAfterViewInit() {
    this.ionSlides?.update();
  }

[liamdebeasi]

Thanks for the issue. I am going to close this as a duplicate of https://github.com/ionic-team/ionic-framework/issues/19638.

[liamdebeasi]

There are some issues with Swiper.js in regards to async initialization of pages in Ionic, so as a workaround doing this.ionSlides?.update(); would be good.

In Framework v6 we are going to recommend that developers use Swiper.js directly. You can read more on this here: https://beta.ionicframework.com/docs/api/slides#migration

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.