【bxslider】ページャータップで丸が点灯しっ放し。スライドを進行時にpause時間が不安定。2つのバグを解消した。

とある仕事で、自動再生をするスライドショーを実装するために、jQueryのプラグイン「bxslider」を使用しました。

仕様的には下記の機能がほしい。

・自動再生
・ページの下に「●●●」が付いていて、タップで対応した画像に飛ぶ

そんなに難しくありませんよね。
実装はとても簡単で、とても便利なプラグインなのですが、細かいところで2点、どツボにハマってしまいました。

その2点とは、
１）ページャーをタップすると、タップした丸が点灯しっぱなしになる
２）スライドを任意で進めた時にpause時間が安定しない

解決できましたので、解決方法をご紹介。
細かく見ていきます。

どツボその1

【状況】
ページャー（下の丸アイコン）をタップすると、スマホ実機でのみ、タップした丸の色が付きっぱなしになる。
押した丸が点灯しっぱなしになるので、アクティブな丸が2つになってしまう。

【解決方法】
jquery.bxslider.cssの86行目を削除
（下記のコメントアウトしている部分が86行目）

/*.bx-wrapper .bx-pager.bx-default-pager a:hover,*/
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: #3cc5ff;
}

タップした部分がhoverしたままの扱いになっているらしく…。これで解決できました。

こうするとPCでは丸にhoverした時に色が付かなくなりますが、メディアクエリ等で対応するとよいでしょう。

どツボその2

【状況】
各種コントロールボタンを押して、スライドを進めても次のスライドが動くまでの時間が安定しない。
例えば、各スライド5秒空くように設定しているのに、ボタンを押すタイミングによっては2秒しか空かなかったりする。

【解決方法】
bxsliderのトリガーのオプション部分に、下記の記述を追加する。

onSlideBefore: function(x){
this.stopAuto();
this.startAuto();
}

トリガー部分のスクリプト全体は下記のようになります。

$(function(){
$(‘.bxslider’).bxSlider({
auto:true,
pause: 5000,
onSlideBefore: function(x){
this.stopAuto();
this.startAuto();
}
});
});

callback関数を使って、一度スライド動作があるたびにオートのタイマーを停止→開始、とすれば実現できる、とのこと。

ちなみに解決できたのは、なんとYaoo知恵袋で見つけて。とても助かりました。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10172493945