Written by Kasumi

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

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

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

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

縦並びを回避するCSS

  .slider {
    display: none;
  }

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

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

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

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

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

CSSでも回避できない場合、jQueryを使おう

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

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

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

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

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

まとめ

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

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

目次

関連記事

slick

【おすすめスライダー】slickslider(スリックスライダー)を使って色々なスライダーを作ってみました。

更新日:2022.11.25
596
slick

slickスライダーで動的にスライド開始位置を変更する方法

更新日:2022.11.25
224
slick

【簡単】slickスライダーをデバイス幅(PC・スマホ)によって機能を有効または無効にする方法

更新日:2022.11.25
1321
slick

【簡単】slickを使い左右チラ見せ中央固定のカルーセルスライダーを実装する方法

更新日:2022.11.25
2579