Share

bxSlider をよく使います。ページ読み込み時に回線速度やブラウザによっては一瞬ですが全ての画像が縦に表示されてしまいます。こうさせないための対策です。

HTML

<ul class="bxslider">
    <li class="bxslider-item"><img src="aaa.jpg"></li>
    <li class="bxslider-item"><img src="bbb.jpg"></li>
    <li class="bxslider-item"><img src="ccc.jpg"></li>
</ul>

CSS

.bxslider-item {
   position: absolute;
   visibility: hidden;
}

.bxslider-item:first-child {
   position: static;
   visibility: visible;
}

JS

$(".bxslider").bxSlider({
    onSliderLoad: function() {
        $(".bxslider-item").css({
            "position": "static",
            "visibility": "visible"
        });
    }
});

解説

1枚目以外の要素はCSSで予め隠しておきます。ここでのミソは display: none; を使用しないところです。display: none; にしてしまうとJSで画像サイズを読めないためスライダーが構築できません。

隠したあとは表示してやらないといけません。bxSlider には onSliderLoad というスライダー構築を知らせてくれるコールバックがありますので、それを利用してスライダー構築後にJSでCSSをいじって表示しましょう。

ではまた。