初心者向けに現職Webエンジニアがデザイン、コーディング、ディレクションについて解説。

mogaBlog

Web コーディング

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

投稿日:2020年1月4日 更新日:

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が反映されないときは・・・

html側に指定しているclass名と、css側のclass名が一致しているか確認してください。
例)html側のクラス名がul class="bxSlider"なら、cssでも.bxSlider liとする必要があります。



CSS(サイズを固定にする場合)

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

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

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

この記事を書いた人

moga

moga

歴14年のフロントエンジニア。HTML/CSSはもちろん、JavaScriptも得意。主に初心者コーダー向けに記事を書いています。

Ads



-Web, コーディング

Copyright© mogaBlog , 2021 All Rights Reserved Powered by STINGER.