【jQuery】slickでスライダーの位置がズレる時の対処法

経緯

スライダーのプラグインslickを使って、選択された条件によってスライダーに表示される画像を切り替えるという機能で切り替えた後に初期位置がズレるという事象が発生。

上記で起きた問題の解消法を紹介します。

ソースコード

slickの設定

$('.slide').slick({
  dots: false,
  infinite: false,
  speed: 300,
});

setPostionでスライダーの再調整を行う

// タブを切り替えた際に発火
$('.tab-btn').on('click',function() {
  $('.slider').slick('setPostion'); // setPostionで再調整
});

setPostion

サイズや位置は親要素を元に計算されるため、非表示のdisplay:noneの状態だとうまく計算がされないのが原因らしい。

そのため、条件によって表示、非表示でスライダーを切り替える際はsetPostionメソッドを使い再調整が必要になる。

まとめ

今回の実装、条件によって表示(display:block)、非表示(display:none)を切り替えていて、初めはbxsliderのプラグインで実装しようとしましたが、bxsliderのCSSとバッティングしてなのか画像の切り替えがうまくいきませんでした。
slickはタブでの切り替えなど複雑な条件での実装例の情報量も多く、無事実装することができました。

もし、スライダーの切り替えで悩まれていたらslickのプラグインを使用をオススメします。