【jQuery】bxSliderの最新バージョン4.2で画像の順番が飛ぶ?おかしい時の対処法

初心者でも使いやすいし、なれてる人だとカスタマイズしやすいbxSlider。

みなさんもよく使われていることだと思います。

最新のバージョン4.2が公開されてからいろいろいじってみたのですが、「次へ」ボタンを押したときの挙動と、オートを有効にしたときの挙動がおかしい…

「次へ」ボタンを連続で2回押した時の挙動

mode:horizontalで作成したスライドショーの「次へ」ボタンを、すばやく2回押してみてください。

それを何回かやってみてください。

何回かやっていると、1つ右のスライドにアニメーションしながら移動したあと、アニメーションせず3枚目に移動したりします。

たまに右にアニメーションせず、一番左にアニメーションして戻るようなこともありました。

「次へ」ボタンを連続で2回押した時の挙動の原因

animation:xxxで設定した、アニメーションにかかる時間の間、つまりスライドが次にアニメーションしているときに次へボタンを押してしまうとこんな現象が出てきてしまうようです。

オートを有効にしたときの挙動

オートを有効にした状態で「次へ」ボタンを、今度はすばやくなくていいので何回か押してみてください。

それを何回かやってみてください。

あれ?また1枚目から3枚目にいきなりジャンプしたりするぞ。急に左に戻ったりするぞ。

オートを有効にしたときの挙動の原因

例えば4秒でスライドが移動するように設定した場合、2秒目で次へボタンを押しても、設定した4秒のタイマーは止まらないみたいです。

なので、4秒目で次へボタンを押してしまうと、2回スライドしてしまうような判断をbxSlider側がしてしまうので、変な挙動が出ると…そういうことみたい。

対処法

今の所バージョンを下げるしか無いみたいです。

https://github.com/virtualidentityag/bxslider4.1.1

ありがたいことに過去のバージョンもgithubに公開されています。

jsファイルだけこのバージョンに戻せば、今回の問題は解決します。

あとはバージョンアップでより良くなるのを待つばかりですね・ω・