「bxSlider」で画像が一度に出てしまう際の対処

前回レスポンシブ対応のスライダーを生成する「bxSlider」を紹介しましたが、スマホなど回線や描画が遅い環境で開くと、JavaScriptでスライダー化される前にリストの画像が一気にボボンと出てしまい見た目に悪かったので、CSSレベルで対処する方法を紹介します。

CSS

.bxslider li {
  display: none;
}
.bx-viewport .bxslider li {
  display: block !important;
}

以上のスタイルを加えることで、最初は何も表示されなくなりますが一度に全部出てしまう状態が避けられます。

HTML的に最初は「bxslider」しか存在しておらず、JSが動いて初めて「bx-viewport」でくくられます。
そのため、JSが動くまではリストを消してしまうという手法です。