slick.jsを利用していて、初期状態をdisplay:none;にしたらレイアウト崩れる

スライドショーの定番Slick.js、とてもよく活用させていただいている。

普通に使用する中では問題にならないが、場合によりslick部分のコンテンツを初期状態で非表示にしておいて、何かしらのアクションで表示させる場合、幅の取得が上手くいかないのか1枚目の画像(コンテンツ)が上手く表示されない。

ということは、表示のタイミングでSlickをリロードさせればよいっぽいのだけど余り検索しても見つからず。

公式サイトのこれか?っていう部分をはめ込んでみたらうまく動いた。
あっているのかは分からない。

$('.your-element').slick('setPosition');

と思いきやしっかりと答えを教えてくれている方がいらっしゃいました。
http://www.codelab.jp/blog/?p=852
と思ったら今回自分のサイトでは不具合発生。スライドの複製がものすごい量作成されてしまった。ので参考サイトをちょっと改造して

var slick = $(‘#slider’).slick({初期化パラメータ});

ここは同じ
なにかしらのボタンをクリックしたら・・・

slick.slick('setPosition');

これで動いた。

slick.jsを利用していて、初期状態をdisplay:none;にしたらレイアウト崩れる」への1件のフィードバック

  1. ピンバック: slick.jsがタブ切り替えやモーダルで不具合 – ドットワン

コメントを残す

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