昨日に続いてslickの備忘録です。
slickはとっても優秀なjQueryスライダープラグインなのですが、ちょっとじゃじゃ馬なところがありまして・・・
ページの途中でスライダーを実装する場合や、メインビジュアルで100vhなど高さが決まっている場合はいいのですが、ファーストビューでスライダーを表示する場合、画面が表示されてからスライダーが動き出すまでの間の一瞬だけレイアウトが崩れてしまうのです。
画像やテキストなどスライダーアイテムの中身が一瞬縦に整列してしまう状態ですね。
それをCSSで防ぎます。
html構成は昨日と同じく以下として、改善のためのCSSは2通り考えられるかと思います。
・html
<div class="container"> <div class="content"> <ul class="slider"> <li class="slide-item">スライド1</li> <li class="slide-item">スライド2</li> <li class="slide-item">スライド3</li> </ul> </div> <aside class="sidebar"> <p>サイドバー</p> </aside> </div>
・CSSその1
.slider { display: none; } .slider.slick-initialized { display: block; }
・CSSその2
.slider { opacity: 0; transition: .3s; } .slider.slick-initialized { opacity: 1; }
「slick-initialized」はどこから出てきた?って話ですが、slickがスライダーを動作させるために自動的に付与されるクラスです。
このクラスが付与されたタイミングでスライダーの動作が始まるということですね。
なので、それまでの間はスライダーを非表示にしてしまおうという作戦です。
CSSの違いは「display: none;で非表示にする」か「opacity: 0;で透明にする」の違いです。
具体的に何が違うかというと、「高さ」の問題です。
display: none;は要素自体を非表示にするので、高さがゼロになります。
そのためスライダーより下にある要素は上に詰められて表示され、display: block;になったタイミングで突如スライダーが出現し、スライダー移行の要素がガクッと下に下がります。
opacity: 0;は要素が透明になっているだけなので、高さが保持されます。
一見するとこちらの方が良さそうですが、画面表示時はレイアウトが崩れた状態から始まるので、縦に並んだ状態の高さが保持されてしまいます。
なので、基本的にdisplay: none;を使う方が良いかなと思います。
ただページのレイアウトや動きなど他の要素にもよると思うので、状況に応じて使い分ける感じですかね。
ちなみにスライダーの高さが固定で決まっているのであれば、heightを指定した上でoverflow: hidden;にした方が綺麗になります。
細かいことを言うと、JQueryでスライダー高さを取得して動的にCSSを付与するのが一番綺麗なのでしょうが・・・
もっと細かいことを言うと、別のプラグインを使ったり、自作するべき・・・?
正解が無い分、悩みは尽きんです。