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

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

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

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

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

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

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

Fires after position/size changes

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

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

==========
ブログの更新情報をTwitterやfacebookで紹介しています。ぜひフォローお願いします!
Twitter → @jugedred
facebook → Jugedred Project

あわせて読みたい


この記事をかいた人

ドレッド Webクリエイター、ライター

Webクリエイター&ライター。フリーランス目指していろいろと活動中。このブログではWeb制作やライティングでお役に立ちそうは知識から、ドレッドの雑記的な内容まで幅広いネタを取り扱っています。ご質問、ご要望、お仕事のご依頼はお問い合わせフォームからどうぞ! 2016年10月から放送大学に入学しました。

jQuery | Posted on 2017/06/30 22:58

※コメントは管理人の承認後に公開されます。

コメントを残す

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