【bxslider】読み込み時にスライドが一瞬縦に並んでしまうときの簡単な対処法

実際にWebページにbxsliderを組み込み、ブラウザで確認すると画像が縦にずらーっと並んで表示され、パッと正常な見た目になる場合があります。
原因としてはページが重く読み込みに時間がかかって処理が実行されてしまうからです。
せっかく作ったのにレイアウトが崩れてしまうとかっこ悪いですよね。
そこで、今回は読み込み時に崩れないための簡単な対処法についてご紹介します。

CSS（非表示 → 表示させる場合）

CSSの制御で簡単にこの問題を解決できます。

HTML

<ul class="slider">
  <li><img src="image1.jpg" alt=""></li>
  <li><img src="image2.jpg" alt=""></li>
  <li><img src="image3.jpg" alt=""></li>
</ul>

以下の記述をCSSに追加するだけ！

.slider li {
  display: none; /*読み込み時は非表示*/
}
.bx-viewport .slider li {
  display: block !important; /*JSが読み込まれたら表示*/
}

上記の記述をいれると読み込み時はスライダーの要素を非表示にしておき、javascriptが正常に読み込まれたら表示されるようになります。

CSS（サイズを固定にする場合）

スライドの幅を固定にすることでも解消されます。
またoverflowを設定することで、範囲外の要素を消すこともできます。

.slider {
  overflow: hidden;
  width: 800px;
}

対処法についてはこの2つが超簡単なやり方かと思います。
ではまた。

関連記事
【bxslider】オプションを複数設定する方法
【bxslider】スライダーを縦の移動に変更する方法
【bxslider】ページャーの丸を非表示にする方法
【bxslider】スライドごとに表示時間（待機時間）を設定する方法
誰でも簡単スライドショー！「bxslider」の設置方法【jQuery】