タブ切り替え時にスライダーのSwiper.jsが動かない時の対処法

普通に動いていたスライダーのSwiper.jsが動かなくなったので焦りました。

動かなくなった原因はスライダーを設置していたコンテンツ部分をタブ切り替えで表示・非表示する対応にしていたことでした。

デフォルトで表示されている箇所のSwiper.jsは問題なく機能していますが、もともと非表示状態のタブコンテンツ内にあるSwiper.jsはタブ切り替えで表示状態にしても動いてくれません。

CSSでdisplay: none;を使用しているのが原因ということらしいのですが、Javascript（Jquery）での対処法が見つかりましたので備忘録のためにメモしておきます。

observer: true,
observeParents: true,

この記述を追加すれば良いとのことでした。

var mySwiper = new Swiper('.swiper-container', {
  observer: true,
  observeParents: true,
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

こんな感じで記載してあげれば問題なく動きました。

Javascript（Jquery）でも解決できない場合はCSSの表示を変更します。
display:none;で非表示にすることが問題なので以下のような代替案で試すとうまくいくかもしれないです。

.tab_contents { 
  visibility: visible;
  height: auto;
}
.tab_contents.hide { 
  visibility: hidden;
  height: 0;
}

Swiper.jsで動かなくなるトラブルは時々発生しますが、矢印（Prev,Next）やページングを枠の外に設置したい場合も注意が必要ですね。