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

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

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

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

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

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',
		},
});

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

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

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