jQuery

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

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

スポンサーリンク

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

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

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

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

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

Fires after position/size changes

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

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

ABOUT ME
アバター
ドレッド
ライティングやWeb制作などインターネットを活用して毎日を自由に生活してるドレッドのブログです。Web制作のちょっとしたテクニックや、趣味で勉強している各種資格、放送大学での学びの記録、そして毎月買った本についての記録を残しています。
お気軽にご相談下さい!

このブログの運営者にお仕事を依頼しませんか?

コレカラウェブ

現在はフリーランスのクリエイターとして、ウェブメディアのライティングやホームページ制作、コンサルティングをしています。まずは事業用サイト「コレカラウェブ」にアクセスしていただき、お気軽にお問い合わせください。メールでのご相談は無料です。皆様からのご連絡お待ちしております。

コレカラウェブ公式サイトへ

関連記事

COMMENT

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

CAPTCHA