コーディング

【slick.js】display:noneを使ったら崩れた!

  • このエントリーをはてなブックマークに追加
【slick.js】display:noneを使ったら崩れた!

こんにちは、ワタナベです!

スライダーのjQueryプラグイン「slick」。

使いやすくてよく使用しておりますが、思わぬ落とし穴にハマってしまったので、今回はメモとして備忘録を残しておきたいと思います!

display:noneで表示が崩れる!

display:noneで要素を非表示にしておいて、フェードで表示させる。
結構よくあると思うのですが、slickを使っている部分にこれをしてしまうと、表示が崩れてしまう事態に遭遇しました。

今回自分はページ全体をdisplay:noneからのフェード表示をさせていたので、見事に崩れてしまっていました(´・ω・`)
display:noneを使うとなんでもスライダーの1枚目のwidthが取得できないようなのです…(一応スライドさせると直りますが…)
色々解決策を探したのですが、タブ切り替えやボタンクリックで対処する方法しかなく……

表示非表示切り替えのタイミングで

$(‘.slider’).slick(‘setPosition’);

↑を実行するのがスタンダードなやり方っぽいですが、今回は別の方法で解決させました。

opacityでフェード表示

今回自分はopacityで対応しました。
崩れの原因である「display:noneの使用をやめる」対処法になります。

HTML

<div class=”scenery”>
<div class=”slider”>
・・・
</div>
</div>

SCSS

.scenery{
opacity: 0;
transition: .4s;
width: 100%;
&.show{
opacity: 1;
}
}

JS

$(function() {
$(‘.scenery’).addClass(‘show’);
});

 

opacityにしたことで、他の部分も調整する破目になりましたが、崩れることもなくなったのでよかったです。
もしdisplay:noneのままでも簡単に解決できるよ!と良い解決方法知っている方いたらこっそり教えてください!

皆様も、slickを使用している部分に「display:none」を使う際はご注意を…!

 

 

 

話は変わりまして、先日久しぶりに外食に行ってきました!(もちろん感染対策はちゃんとして!)

某作品のコラボカフェで、作品内に出てくるメニューが頼めてテンションが上がりました(*‘ω‘ *)
ボリュームがすごかったので時間内に食べるのが大変でしたが美味しかったです(笑)

最近はめっきりライブに行けていませんが、夏に地方の方でとっても行きたいライブが開催されるので、なんとか夏には緊急事態宣言が解除されることを願うのみです…!

まだまだ我慢が強いられておりますが頑張っていきましょう(ノД`)・゜・。

 

それではまた次回。

ご閲覧ありがとうございました!

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ