開発マトリョーシカ

bxsliderがおかしな動きをしたからなんとかしてみた

みんな大好きbxslider。スライダーといえばbxslider。標準でレスポンシブデザインにも対応してくれているので、いつもお世話になっています。

そのbxsliderの動きがどうもおかしい。スマートフォンで見ると変な動きをします。
最後のスライドを表示するときに、おかしな位置に次のスライドが見えていたり、NEXTボタンがクリックできなくなったり。

いろいろ調べてみて、原因がわかりました。どうやら、表示されるスライドの数が一つになるとおかしくなるようです。

ここでおさらい。表示されるスライドの数は、どのように決められるでしょうか。
表示されるスライドの最大数はmaxSlides、最小数はminSlidesで指定します。
スライドの大きさは、slideWidthで指定します。隣のスライドまでの余白は、slideMarginで指定します。
表示されるスライドの数は、slideWidthとslideMarginによって自動的に計算されます。スライダーを表示するボックスの幅が広いとたくさん表示されるし、狭いと少なくなります。
どんどん少なくなって一つになると、動きがおかしくなります。

ただし、表示されるスライドの数が一つになってもおかしくならない場合があります。maxSlidesとminSlidesを1にしている場合です。
しかしその指定だと、スライダーを表示するボックスの幅をどれだけ広げても表示されるスライドが一つになってしまいます。

......ということは、場合に応じて設定を変えればいいということになります。
あくまでも不具合を回避するための対応ということになりますので、いつかこの対応が不要になるといいですね。

// bxslider var setting = function() { var setting_pc = { minSlides: 1, maxSlides: 3, slideWidth: 210, slideMargin: 48 }; var setting_sp = { minSlides: 1, maxSlides: 1, slideWidth: 210, slideMargin: 48 }; return ($(window).width()>767) ? setting_pc : setting_sp; } var mySlider = $('.mybxslider').bxSlider(setting()); // resize $(window).resize(function(){ mySlider.reloadSlider(setting()); });