【bxslider】最後のスライドが最初に表示されるバグの対処法

こんにちは。

今回はbxSliderのお話です。

スライダーのjsといえば

• bxSlider
• slick
• Swiper

などなどありますね。

実は、私が毎回使っているのはbxSliderです。

理由は最後におまけとしてお話ししますね。

（おまけ程度の話なので利便性がどうとかの話ではないです。期待しないでください^^;）

bxSliderといえば、数年前にレスポンシブ対応が実装されて非常に使いやすくなりましたね！

ただ、しかし、いろんな場面でbxSliderを使ってきた方はご存知かもしれませんが、bxSliderにはいくつかバグが存在します。

この前、bxSliderを使って画面いっぱいいっぱいのスライダーを作っていた時にぶち当たったバグが、
「最後のスライドが最初に表示されてしまう」
というバグです。

画面いっぱいいっぱいのスライダー、通称「フルワイドスライダー」を作るときには毎回このバグに直面するだろうと思い、解決策を探しました。

ネット上にはなかなか情報が無く、偶然、解決方法が見つかったので備忘録がてら、世界のwebエンジニアのためにここに記しておきます。

ぜひ役に立ててください！

いきなり対処法！

では早速対処法を紹介します。

バグが起きてしまう条件は、bxSliderのオプションの

minSlides

と

maxSlides

の設定が、以下のようになっているときにバグが発生します。

$(function(){
	$('#sample').bxSlider({
		minSlides: 1,
		maxSlides: 1,
	});
});

これを、

$(function(){
	$('#mainvisual ul#mainvisual_bxslider').bxSlider({
		minSlides: 1,
		maxSlides: 2,
	});
});

にするとバグが解消されます。

要するに、
「minSlides」＜「maxSlides」
の数を設定しなくてはいけない、ということです。

まとめ

駆け出しのwebエンジニアの方は「スライダーを作れ」と言われてもどのプラグインを使ったらよいか、というところでもすでにつまずいてしまいますよね。

その上、選んだjsプラグインがバグでおかしな挙動をしだすと生きている心地がしなくなります（汗）

そんな駆け出しwebエンジニアの方にも役に立てていたら嬉しいです。

bxSliderを使って最後のスライドが最初に表示されてしまうバグが起きてしまったらぜひ今回お話しした対処法で乗り切ってください！

おまけ

さてさて、少しおまけです。

はじめにいくつかスライダーjsのプラグインを紹介しましたが、Swiperなんかはちょっとリッチな動きが実装できるんですよね！

「Life is Good」のLIG.incさんの公式ホームページのメインビジュアルのスライダーはSwiperが使われているようです。

「LIGさんのサイトみたいにしたい！」という要望に答えた時にjsでこのようなスライダーを作りました。

LIGさんはjsでカスタマイズされているようだったので、すぐにはこんな動きにはできなかったですがヌルヌル動くと気持ちいですよね！

https://liginc.co.jp/

そうそう、それから、私がbxSliderを使うようになったきっかけなんですが、早い話がslickのトラウマです（笑）

当時新卒で入社した会社で、すでに出来上がっているサイトにスライダーを追加実装することになり、私が担当することになりました。

そのときに選んだjsプラグインが「slick」スライダーだったんです。

いざ実装してみたら、すでに実装していたハンバーガーメニューがバグってしまいました！！！

上司には怒られ、納期が近いとプレッシャーをかけられ、当時駆け出しの私にはトラウマにしかならなかったです。。。。

結局別のjsプラグインである「bxSlider」を使って、無事納期にも間に合った、、、という思い出です。

それ以来、スライダーといえばbxSlider、というのが私のスタイルです。

今となってはどのスライダーでも使えるようになりましたのでこのトラウマも良き思いでですね^^

という誰得・・・（　＾ω＾）・・・