はじめに
「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で非表示にしてからフェードインさせているのですが、これが原因でした。
これ、厄介なことにスライダーのオプションが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このあたりは「設定された要素を無いものとして扱う」ので時々厄介なことにぶちあたったりしますね。気をつけて使っていきたいです。