こんにちは、ワタナベです！
スライダーの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」を使う際はご注意を…！
話は変わりまして、先日久しぶりに外食に行ってきました！（もちろん感染対策はちゃんとして！）
某作品のコラボカフェで、作品内に出てくるメニューが頼めてテンションが上がりました(*‘ω‘ *)
ボリュームがすごかったので時間内に食べるのが大変でしたが美味しかったです(笑)
最近はめっきりライブに行けていませんが、夏に地方の方でとっても行きたいライブが開催されるので、なんとか夏には緊急事態宣言が解除されることを願うのみです…！
まだまだ我慢が強いられておりますが頑張っていきましょう(ノД`)・゜・。
それではまた次回。
ご閲覧ありがとうございました！
