bxSliderでレスポンシブ対応した際のメモ

bxSliderの記事はこれで3つめでしょうか。使う度にいろいろ状況が違うせいなのか、分からないところが毎回でてきます。

今回は根本的な解決ではないのですが、英語サイトに助けられつつなんとかしたというお話です。

また引っかかることもありそうなので、忘れないうちに記事にします。

bxSliderのレスポンシブ設定

bxSliderのレスポンシブ設定自体は簡単にできます。旧バージョンでは対応していなかったようですが、現在は以下の設定だけで動作します。

<script>
$(document).ready(function(){
$('.slider').bxSlider({　　//.sliderは任意のクラス名
responsive: true
});
});
</script>

が、これですと誤動作を起こしました。

bxSliderのレスポンシブでの誤動作

構造として、 responsive: trueを設定した状態で、ウィンドウの幅に応じて複数枚の画像が並んでいるものとします。ウィンドウを縮小するとその幅に応じて枚数が減る形ですね。コードとしては以下のような感じです。

<script>
$(document).ready(function(){
$('.slider').bxSlider({
minSlides: 1,
maxSlides: 6,
responsive: true
});
});
</script>

この状態で1枚になるまで幅を縮小し、左右のページングボタンや下部のドットボタンを押すと、2枚目から3枚目への推移や、1枚目から最期の画像への推移の際に表示される画像がおかしくなります。

maxSlidesの数に拠るようですが、6枚目が表示されずに5枚目が表示されたり、2枚目の次は一週回ったあとで3枚目が表示されたりです。

動作的にはdata-slide-indexのとび先か移動の際の挙動がおかしくなっているようでした。ソースをみるとナンバー自体はおかしくないので、動かす部分に問題がある可能性が高いと思えます。

なお、画像をかえたり、名称をかえたり、他の設定をいれたりしても改善しませんでした。

手がかり

修正の手がかりとして、minSlidesとmaxSlidesを「1」にすれば正常に動作するという状況がありました。

ただ、これをしてしまうとウィンドウ幅を広げても1枚しか並ばす、要件を満たしません。

つまり、「画像が1枚しか並ばないパターン」と「画像が複数枚並ぶパターン」で設定をかえれば実現可能なはずです。

対応策

結論から言えば、旧バージョンで使われていたらしい方法を用いることで正常な動作となりました。

参考にしたのは以下のページです。

change jquery bxslider options in responsive

ここにしめされた以下のコードを基本として、現状にあった設定（slidewidthなどの数値をかえるなど）を行いました。

<script>
  $(document).ready(function () {
    // initiates responsive slide gallery     
    var settings = function() {
      var settings1 = {
        minSlides: 2,
        maxSlides: 1,
        moveSlides: 1,
        mode: 'fade',
        startSlide: 0,
        captions: true
      };
      var settings2 = {
        minSlides: 2,
        maxSlides: 4,
        moveSlides: 1,
        mode: 'fade',
        slideWidth: 280,
        startSlide: 0,
        slideMargin: 10,
        captions: true
      };
      return ($(window).width()<630) ? settings1 : settings2;
    }

    var mySlider;

    function slideSetting() {
      mySlider.reloadSlider(settings());
    }

    mySlider = $('.slider-landing').bxSlider(settings());
    $(window).resize(slideSetting);
  });
</script>                               

やっていることは単純でreturn ($(window).width()<630) ? settings1 : settings2;で最初に設定していた設定内容を書きかえています。

前述の出し分けがこれで実現できました。

結び

日本語で検索しても何も引っかからず、おそらく私の作り方に問題がある可能性が高いと思います。他のサイトでは問題があるなどとは書かれていませんでしたので。

とはいえ、サンプルとほぼ同じ作り方でしたので何が悪かったのか、現時点でも原因がわかりません。jQueryのバージョン違いということも考えたのですが、それも違ったようですし…。

すっきりはしませんが、実現はできたということで一段落です。