CodeLab技術ブログ

プログラミング技術まとめ

jquery slick で表示が崩れる場合

jquery slickを使っていて、スライダーの表示が崩れてしまう場合がありました。
https://github.com/kenwheeler/slick

現象

複数のスライダーを設置していて、ボタンでスライダー表示のON・OFFをしている。
ブラウザのリサイズ後、hide状態のスライダーの表示を再開すると表示が崩れてしまっている。
たぶん、hide状態のブロックはスライダーの処理が行われないためではないかと思います。

対策

hide->showに切り替え後、slickをリセットする。

方法

こんな感じで初期化して
var slick = $(‘#slider’).slick({初期化パラメータ});

ボタンを押してスライダーの表示を再開するときに

slick.slick(‘reinit’);

を呼べば再処理されるようなのでちゃんと表示されるようになりました。

コメントは受け付けていません。