はじめに

「bxSlider」便利ですよね。いつもお世話になってます。
基本的な使い方はぜひこちらのわかりやすいサイトを参考にしていただくとして。

画像の順番が入れ替わっている！？

特定の条件が揃った時に、画像の順番が入れ替わることに気付いて焦りまくったので忘備録。ググっても特に似たような内容に引っかからなかったので、頻発するようなことではないのかも知れませんが。

この画像たち↓をシュッ！シュッ！と動くスライダーで表示します。

ピンクが一枚目のはずなのですが、リロードすると何故かグリーンの画像から始まってしまいます。（そして2周目はちゃんとピンクから始まっている）

こうなってしまう条件とは

mode:horizonalである
親boxにdisplay:noneを指定している

大きくこの2つの条件が揃った時に画像の順番が入れ替わることがありました。（chrome,Firefox,IEで確認)

javascript

$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true, //自動再生on
autoControls: true,  //自動再生on
});
$('.bxslider').fadeIn(1500);//1.5秒かけてフェードイン
});

css

.bxslider{display:none}

HTML

<div>
    <div class="contents">
        <div class="bxslider">
        <div class="bx_photo"><img src="http://placehold.it/720x480/ffb2b2/ffffff"></div>
        <div class="bx_photo"><img src="http://placehold.it/720x480/d8b2ff/ffffff"></div>
        <div class="bx_photo"><img src="http://placehold.it/720x480/b2b2ff/ffffff"></div>
        <div class="bx_photo"><img src="http://placehold.it/720x480/b2ffd8/ffffff"></div>
        </div>
    </div>
</div>

画像が一瞬光ったり縦に並んでしまう問題を解消するために、div.bxsliderをdisplay:noneで非表示にしてからフェードインさせているのですが、これが原因でした。

bxSliderで画像が一瞬縦に並んでしまう問題の解決方法

これ、厄介なことにスライダーのオプションがmode:fadeの時は何の問題もなく表示されます。

解決策

要は、display:noneだったりheightが設定されてなかったりスライダーを表示させるboxを認識できない時に起こる現象のようです。フェードインはこれ↓で解決しました。

javascript

$(document).ready(function(){
$('.bxslider').css({opacity:'0.01'}).animate({opacity: '1'},1500); 
//1.5秒かけて透明度を1%→100%にする
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
});

css

.bxslider
{ display: block;
  height: 420px;}

さいごに

display:noneやopacity:0このあたりは「設定された要素を無いものとして扱う」ので時々厄介なことにぶちあたったりしますね。気をつけて使っていきたいです。

bxsliderで画像の順番が入れ替わってしまう問題

はじめに

画像の順番が入れ替わっている！？

こうなってしまう条件とは

解決策

さいごに