【簡単】slickスライダーで一瞬縦並びになり崩れた表示になるのを対処する方法

slickを使い、画像スライダーを実装したが、ページをロードしたら一瞬画像が縦並びになり崩れた表示になる。

このような悩みを解決します。

本記事では、CSSを追加して一瞬縦並びになる不具合を修正する方法について解説します。

縦並びを回避するCSS

  .slider {
    display: none;
  }

//slick-initializedクラスが付与されたら
  .slider.slick-initialized {
    display: block; 
  }

縦並びを回避するCSSです。

slick読み込み完了後に、slick-initializedクラスが指定したスライダー要素に付与されます。

上記の仕組みを用いて、最初はスライダーをdisplay: none;で消しておき、付与されたら display: block;で表示します。

そうする事で一瞬縦並びになるのを防ぐ事ができます。

.slider {
 height: 0;
}

$(document).ready(function(){
  $('.slider').css('height','auto');
});

前章のCSSを追加しても一瞬縦並びになる場合があります。

その場合はまずCSSでスライダー要素の高さを0にします。

次にjQueryのready関数を使い、DOMの読み込みが終わったらスライダー要素の高さをautoに戻す処理をします。

これで解消できるかもしれません。

slickスライダープラグインのCDN読み込み箇所、実行関数スクリプトの位置によっても縦並び不具合になる可能性があるので、位置変更も考慮する必要があるかもしれません。

以上で解説を終わります。