JavaScript

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

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

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

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

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

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

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

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

Fires after position/size changes

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

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

===

Twitterアカウント:@corekaraweb
⇒管理人・村上英輝が発信するフリーランスの日常を発信しています。WebライターやSEOライターのお役立ち情報もたまにあるかも! フリーランスの方やライターの方はフォローバックしておりますので、お気軽にフォローしてください!

facebookページ:コレカラウェブ
⇒「コレカラブログ」を含めたコレカラウェブのブログ運営の裏側を公開しています。ブログに公開する前の先行情報や運営方針などを記録しています。PVや収益に関する生々しい話も!よろしければ「いいね!」お願いいたします。

「いいね!」と思ったら、クリックお願いいたします<m(__)m>
にほんブログ村 小遣いブログ Webライター・ブログライターへ にほんブログ村 IT技術ブログ SEO・SEMへ にほんブログ村 小遣いブログ ブログアフィリエイトへ
ABOUT ME
村上英輝
2018年4月に開業したコレカラウェブ代表の村上英輝です。フリーランスとしてWebライティング・SEO対策・メディア運営・障害者支援のお仕事を一貫して承ってきました。現在はフルリモートのWeb制作会社でSEO担当者もやっています。このブログではコレカラウェブのお仕事で得たノウハウやテクニックを詳しく紹介しています。所有資格:Webライティング実務士・ウェブ解析士・SEO検定1級・情報セキュリティスペシャリスト・FP2級・AFPなど。

COMMENT

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

CAPTCHA