スライダーライブラリのbxsliderをつかって複数画像のスライダーを作っていた。

こういうやつ
blog20150831

設定はこんな感じだ

$('#bnrSlider').bxSlider({
mode: 'horizontal',
pager:true,
auto: true,
slideWidth: 300,
speed:1000,
pause:5000,
moveSlides:1,
minSlides: 1,
maxSlides: 3,
slideMargin: 40
}); 
3枚のバナーをみせて、スライドするときは1枚ずつスライドさせるっていう設定だね。

bxsliderはレスポンシブに対応していて、画面サイズが短くなると表示枚数を減らすといった臨機応変対応をしてくれる。

そのあたりをやってくれるのが、minSlidesやmaxSlidesだ。 

画面をぎゅーっと縮めてスマホサイズにするとこうなる

blog201508312

便利なライブラリだね。

でもここでバグがおきた。

 画面をぎゅーっと縮めてスマホサイズでみたときには、スライダーで表示されてるバナー画像は1つになっているのだけれど、このときに変な挙動をする。


・ 下のページャーアイコン(◯◯●ってやつ)と画像があってない。ズレてる。
・最後の画像が表示されたあとに、最初の画像にパっと突然切り替わってしまう。んでガクンって感じにみえる。
・ずっと右に動き続けてて欲しいのに、3枚目→1枚目を表示するときにぎゅーんて巻き戻したみたいに逆方向に一気に動く


パラメータをいろいろいじってみたら、 これを引き起こしているパラメータが2つあった。

maxSlides:3
slideMargin:40

の2つ。

1つの表示エリアしかないのにmaxSlidesが2以上の数字が入ってるとばぐる。
slideMarginが設定されてるとなぜかバグる。

なので、ためしに
maxSlides:1
slideMargin:0

にしてみたら直る。

でもレスポンシブなのでpc表示時には、3つのバナー画像を出したいし、marginもとりたい。

困った。

困り果てて、しょうがないので分岐を書いて対応することにした。

もともとのやつ 

$('#bnrSlider').bxSlider({
mode: 'horizontal',
pager:true,
auto: true,
slideWidth: 300,
speed:1000,
pause:5000,
moveSlides:1,
minSlides: 1,
maxSlides: 3,
slideMargin: 40
}); 


分岐を書いて対応したやつ

var bnrSlideOpt = {
mode: 'horizontal',
pager:true,
auto: true,
slideWidth: 300,
speed:1000,
pause:5000,
moveSlides:1,
minSlides: 1,
maxSlides: 3,
    slideMargin: 40
}
var bnrslider = $('#bnrSlider').bxSlider(bnrSlideOpt);
topBnrSlider();
function topBnrSlider(){
if(window.innerWidth < 750){
bnrSlideOpt['maxSlides'] = 1;
bnrSlideOpt['slideMargin'] = 0;
} else{
bnrSlideOpt['maxSlides'] = 3;
bnrSlideOpt['slideMargin'] = 40;
}
bnrslider.reloadSlider();


ちょっとわかりにくいかもしれないので、説明をする。

まずbxsliderのオプション(パラメータのやつら)は配列の形で一式変数にいれちゃう

var bnrSlideOpt = {ここにオプションかいていく}

次に発動させるbxsliderを変数にいれとく

var bnrslider = $('#bnrSlider').bxSlider(bnrSlideOpt);

↑オプションはbnrSlideOptの形でまとめてあったから1行でいけるね。

それで、bxsliderを実際に呼び出すわけなんだけれども、そのときに分岐を書く。


if(window.innerWidth < 750){
bnrSlideOpt['maxSlides'] = 1;
bnrSlideOpt['slideMargin'] = 0;
} else{
bnrSlideOpt['maxSlides'] = 3;
bnrSlideOpt['slideMargin'] = 40;
}

 
 ウィンドウサイズが750px以下だったら、maxSlides:1 slideMargin:0
にしてしまう。

750pxという数字は各自変えてもらえればいいと思う。

僕の場合は750pxでスライダー枠を1つにする分岐をcss側で書いていたので それと対応させただけ。

んで 最後に設定しなおされたオプションでスライダーを再読み込み。

bnrslider.reloadSlider();


こういう流れ。

レスポンシブを考えると

$(window).resize(function(){
topBnrSlider();
}); 

も書いておくとより良いと思う。


アミーゴ!