【解決】bxSliderでカルーセル（ページャーの丸印）のハイライトが消えない

bxSliderという、jQueryプラグインを使ってちょっとハマった時の話。
これは写真などのスライドを簡単に実装できるプラグインでよくできているのですが、ちょっと不具合と言っても良さそうなものがいっこありまして。

どういう現象かというと、スライドの下に●印を表示するってよくあるパターンですが、この●印のハイライトが消えなくなるというもの。

例えば写真3枚のスライドの場合、●印が３つ表示されますよね、下のように。

●○○

黒丸が今表示しているスライドだと思ってください。
先ほどからハイライトといっているのは、この黒丸のことです。
（bxSliderはactiveというclassを追加して見た目を変化させています）

で、アニメーションをオートにしていると、自然に2枚目に切り替わり、印はこう変わります。

○●○

当たり前ですね。
ところがこの丸印部分をマウスで触っていると、たまに２個ハイライトされ、そのハイライトが消えなくなってしまうことがあるのです。

スライド2枚目が表示されている状態で、１つめの丸を触ってこの現象が発生するとこうなります。

●●○

そして、オートで３枚目に移るとこうなります。

●○●

この１つ目の丸印のハイライトが消えなくなってしまうのです。
この現象が発生するきっかけは、丸印にマウスを乗せたままドラッグして、丸印の外でマウスを離す、というものでした。
要するに、本来の操作ではないので、丸印をクリックしたときのようにスライドは移動しません。


原因はというと、「jquery.bxslider.css」にありました。
今回使用した「bxSlider v4.2.12」に同梱されていたcssでは、78行目に「.bx-wrapper .bx-pager.bx-default-pager a:focus」という記述があり、これが原因でした。

つまり、フォーカスが当たっている丸印がハイライトと同じ見た目になっていて、上述の操作を行った場合に、触った丸印からフォーカスが外れなくなる、ということ。

フォーカスが外れれば表示は元に戻るので、どこでもいいのでページの別の場所をクリックするなどすると、表示は戻ります。

なぜこの記述が入っているのかはよく分かりませんね。
キーボード操作も想定していたのかな？
マウスだけで考えればhoverで変化するだけでいいので、focusは要らないと思います。

最初、bxSliderの公式サイトのサンプルで現象が発生していなかったことから、僕が使っている別のスクリプトとのバッティングを疑っていました。
しかしなんのことはない、公式サイトのサンプルのcssにはこの、focusの記述が無いっていうね。。
きっとこの不具合に気づいたんじゃないのかな。
配布版も直しておいていただきたいものです。