【slickスライダー】ロード時に一瞬縦並びになるのを、CSSで解決するには？

設置していざ表示を確認してみると、一瞬ですが画像が縦に並んだ状態がチラッと映り、少し経つときちんとスライダーの形になるという気になる挙動が。

これは、slick用のCSSが適用されるタイミングに課題があります。

スライダーを設置するとき、HTMLはこんなシンプルな記述でOKです。

<!--必要な記述-->
<div class="slider">
  <div><img src="https://placehold.jp/1000x250.png" alt="slide1"></div>
  <div><img src="https://placehold.jp/1000x250.png" alt="slide2"></div>
  <div><img src="https://placehold.jp/1000x250.png" alt="slide3"></div>
</div>

しかし実際に出力されるHTMLは、JS側$('.slider').slick();の実行によってこのようにたくさんの新しい要素や、slick用のCSSで使われるclassが割り当てられています。

つまりJSの実行を待たないとclassが付与されないため、slick用のCSSが適用されるまでの間にほんの少しラグができてしまう、というわけです。

JSを使わずに解決してみよう

これを防ぐには、
①最初はスライダーを非表示にしておき、
②JS側$('.slider').slick();の実行が終わったら表示させるにはどうするか？
を考えればOKです！

JSでの調整も考えられそうですが、slickにはHTMLやCSSだけで簡単に完結できる手段があります。

今回はそちらを採用して手っ取り早く解決してみましょう。

方法1：CSSを使う

実際の出力結果、冒頭に付与される「slick-initialized」が解決の鍵となります。

<!--実際の出力結果-->
<div class="slider slick-initialized slick-slider">
以下省略...

slick-initializedとは、スライダーが初期化（読み込み完了）した時点で付与されるclass。

これを利用して、「sliderと一緒にslick-initializedが付与されているか否か」でスタイルを分けることで、一瞬縦並びになってしまう状態を防げます。

.slider{
  display: none;
}
.slider.slick-initialized{
  display: block; /*slick-initializedが付与されたら表示*/
}

CSSアニメーションを使うのも◎

使うプロパティを変えれば、フェードインで表示させることも可能です。

.slider{
  opacity: 0;
  transition: opacity .3s linear;
}
.slider.slick-initialized{
  opacity: 1;
}

方法2：HTMLを使う

さらに簡単なのは、そもそものHTMLの記述にあらかじめ必要なslick用のclassを書いてしまうというもの。

個々の画像を囲んでいる要素に<div class="slick-slide">とclassをつけます。

<div class="slider">
  <div class="slick-slide"><img src="https://placehold.jp/1000x250.png" alt="slide1"></div>
  <div class="slick-slide"><img src="https://placehold.jp/1000x250.png" alt="slide2"></div>
  <div class="slick-slide"><img src="https://placehold.jp/1000x250.png" alt="slide3"></div>
</div>

slick-slideに適用されているCSSを見てみるとこんな感じ。方法1と処理は全く同じでした。

アニメーションを使用しない場合などはこちらを採用してみてもよさそうですね。

.slick-slide{
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}
.slick-initialized .slick-slide{
  display: block;
}

以上、「slickでロード時に一瞬縦並びになるのをCSSで解決する方法」でした。