IonSlidesのinitialSlideオプション使用時に先頭スライドの画像がちらつく問題と対応

この記事について

IonSlideのinitialSlideオプションを使った際に想定通りの動作がせず、最初のスライドが一瞬表示される現象が発生しました。正攻法での解決ができなかったのでハック的な方法ですが記録しておきます。

IonSlideは内部で使用しているSwiper.jsのオプションが利用できます。initialSlideオプションを使うと最初に表示するスライドを指定できます。
Swiper.jsオプション一覧

issuesに似たような現象があがっています。
bug: ionic 4 ion-slide set initialSlide not work immediately

現象

initialSlideで指定した「３」の画像が表示される前に、先頭スライドの「1」が一瞬表示されています。

再現したコードは下の通り。
Ionicのテンプレプロジェクトをベースにion-slidesにオプションを設定しています。

about.html

<ion-content>
  <ion-slides pager="true" [options]="slideOpts">
    <ion-slide>
      <div class="wrapper">
       <img src='assets/img/1.png' />
      </div>
    </ion-slide>
    <ion-slide>
      <div class="wrapper">
       <img src='assets/img/2.png' />
      </div>
    </ion-slide>
    <ion-slide>
      <div class="wrapper">
       <img src='assets/img/3.png' />
      </div>
    </ion-slide>
  </ion-slides>
</ion-content>

about.ts

export class AboutPage {

  public slideOpts = {
    initialSlide: 2,
  };

パッケージ環境

• Angular 8.2.14
• Ionic 4.11.6　※ 5.0.0でも同様の事象が発生しています。

対応

表示を遅延させる

setTimeoutで表示を遅延させることで、指定したスライドが表示されたあとに表に出すようにします。
他に良い方法がなかったのでこの古典的な方法で対応しています。

about.ts

setTimeout(() => {
  this.showImage = true;
}, 300);

先頭に空のion-slideを挿入する

空のスライドを挿入することで表示時の先頭スライドのチラつきはなくなりましたが、スライド番号がずれてしまいます。

about.html

<ion-slides pager="true" [options]="slideOpts" #imageSlides >
  <ion-slide></ion-slide> <!-- 空のion-slide-->
  <ion-slide>
    <div class="wrapper">
     <img src='assets/img/1.png' />
    </div>
  </ion-slide>

さいごに

微妙な方法しか紹介できませんでしたが、より良い実装があればコメントやissuesに展開していただけると助かります。