スライダーを実装中するならとても便利なbxsliderですが、使用しているとこんな現象に遭遇しませんか？
最後のスライダーがなぜか先頭にセットされてしまう。
特に、初心者の頃はこの現象がよく起こります。
この現象が起こるとき、定番の解決方法というものがあるのですが、それでは対処しきれないケースも出てきます。
そうなるともう焦ってしまって大変。
ということで、今回はこの「最後のスライダーがなぜか先頭にセットされる」時の対処方法を有名なものからマイナーなものまで、3つ紹介していこうと思います。
いずれかの方法で改善できると思いますので、お困りの方は是非参考にしてみてください。
ど定番の対処法
まず、この現象が発生する原因として考えられるのは、bxsliderの実行関数をready関数内で呼び出しているということ。$(function(){...})の中ですね。
画像がちゃんと読み込まれる前にbxsliderが実行されるとバグるので、呼び出しをready関数内で行っている場合は、load関数内（ページ読み込み時）に変更してみましょう。
だいたいはこれで直ります。
load関数内で呼び出し
$(window).load(function(){
$('.bxslider').bxSlider({
//好きなオプション
});
});最初だけautoをfalseにしておく
スライダーオプションのauto:trueの設定が原因でこのバグ現象が起こっている可能性もあるようです。
そこで、最初はauto:falseと設定しておき、初回から２枚目へのスライドはこちらでコントロールし、その時にautoオプションを有効化する、という対処方法があります。
記述例
$(window).on('load', function(){
var $bxslider = $('.bxslider');
var pauseTime = 3000;
$bxslider.append(slideHtml);
var slider = $('.bxslider').bxSlider({
startSlide:0,
auto:false,
speed: 1000,
autoControls: false,
pause: pauseTime
});
//二枚目に移し、autoを有効化
setTimeout(function(){
slider.goToSlide(1);
slider.startAuto();
},pauseTime);
)};最終手段
本当に最終手段です。
私は上記の二つの手法をとっても治らないケースを一度だけ経験したことがあるのですが、その時に唯一解決できた方法です。
こちらの記事に救われました。
あまりしたくないですが、 プラグインのソースコードをいじります。
通常の jquery.bxslider.jsを読み込んでいる場合
108~113行目あたりに次のような記述があります。(バージョンによって記述場所やコメントの内容が多少変動しているかもしれません。)
jquery.bxslider.jsファイルの中身
// create a namespace to be used throughout the plugin
var slider = {},
// set a reference to our slider element
el = this,
// get the original window dimens (thanks a lot IE)
windowWidth = $(window).width(),
windowHeight = $(window).height();この下に以下を 追記します。
追記内容
var imgWidth = el.width();次に、一箇所だけ記述を書き換えます。
526行目あたりに以下のような記述があると思います。
書き換え前
if (slider.settings.mode == 'horizontal') setPositionProperty(-position.left, 'reset', 0);という記述を、
書き換え後
if (slider.settings.mode == 'horizontal') setPositionProperty(-imgWidth, 'reset', 0);このように書き換えます。具体的には、 -position.leftを -imgWidthに書き換えただけです。
以上です！
jquery.bxslider.min.jsを読み込んでいる場合
minファイルで読み込んでいる場合も、先ほどの修正に対応する箇所を見つけ出し、同様の修正を加えていくだけです。
*以下、私が使用していたvar.4.2.12のファイルをもとにしています。
以下のような記述がどこかにあるので、探し出します。
書き換え前
…var s={},o=this,r=t(window).width(),a=t(window).height();if(!t(o).data("bxSlider")){…見つけたら、 a=t(window).height();と if(...~の間に一文だけ追記します。
書き換え後
…var s={},o=this,r=t(window).width(),a=t(window).height();
var imgWidth=o.width(); //←追記
if(!t(o).data("bxSlider")){…あともう一つ！
書き換え前
…,void 0!==t&&("horizontal"===s.settings.mode?S(-t.left,"reset",0):"vertical"===…書き換え後
…,void 0!==t&&("horizontal"===s.settings.mode?S(-imgWidth,"reset",0):"vertical"===…-t.leftを -imgWidthに書き換えています！
以上です！
この方法でも無理だった場合は、僕はお手上げです。そんな時は諦めてbxsliderじゃないやつ使いましょう...
追記
画像にwidthとheightを指定するだけで直ったという記事も目にしました。
私はこれで直ったことはありませんが…
ただ、bxsliderのクラスを付けた親要素が初期状態でdisplay:noneやheight:0の状態になっていると、この現象が発生する原因になるそうで、それに関係しているのかもしれません。
