【簡単】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読み込み箇所、実行関数スクリプトの位置によっても縦並び不具合になる可能性があるので、位置変更も考慮する必要があるかもしれません。

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

Ads

関連記事

JavaScript プログラミング

iframeで埋め込みしたユーチューブをiframe外で停止させる方法。

更新日:2021.01.02
344
HTMLCSS

【コピペ用】ハンバーガーメニューをCSSのみで実装する方法

2022.06.05
299
PHP プログラミング

Use of undefined constant campaign – assumed ‘文字列'(this will throw an Error in a future version of PHP) inエラーがでる場合の対処方法

2022.01.29
22
JavaScript プログラミング

【簡単】slickスライダーでデバイス事にオプションを切り替えよう【レスポンシブ設定を追加】

2022.04.07
65