IT

slick.js使用時に親要素を表示非表示を切り替えたときスライダーが表示されない問題の解決法

スライドショーを実装できる、jQueryプラグインの「slick」すっごく便利ですよね!
普通のスライドショーだけでなく、カルーセルぽいビジュアルや、レスポンシブウェブデザインにも対応しています。

普通に使うだけなら、簡単に使う事のできるslickですが、タブ切り替えと組み合わせて使ったときに、不具合が発生しました。

どのような不具合かというと、予めdisplay:none;を設定してある親要素の中にある子要素に実装したslickがうまく表示されませんでした。親要素をdisplay:block;に変更してもスライダーが表示されない。

どうしたもんかなと、いろいろ調べてみたところ、親要素の表示非表示を切り替えたタイミングで、

$('.slider').slick('setPosition');

と、このように「setPosition」メソッドを実行することで、ちゃんとスライダーを表示させることができました。

この「setPosition」メソッドですが、slickの公式サイトにはこんな風に書いてありました。

Fires after position/size changes

位置やサイズを変更したときに発火させるメソッドのようですね。
恐らく親ボックス要素が非表示の時は、スライダーの大きさがゼロになっているのではないでしょうか。そのため親要素の表示非表示を切り替える時にサイズの再調整が必要になるのではないかと・・・

ともかく、親要素の表示非表示の切り替えのタミングでこの「setPosition」メソッドを実行することで問題は解決しました。

ABOUT ME
アバター
ドレッド
目標必達のために鬼努力を惜しまない個人事業主。記事執筆・ホームページ制作・メディア運営・コンサルティングのお仕事をしています。立命館大学中退。放送大学教養学部の全科履修生。中小企業診断士とFP1級を目指してハードに勉強中。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA