【JavaScript】bxsliderのボタンが効かないなら実はこれが原因かも…

bxsliderのボタンが効かない!?間違ったコーディング

スライダーの実装に私はよくbxsliderをつかっているのですが、ページ送りのボタンが効かないという問題が起こりました。
bxsliderのページ送りボタンが効かない問題はネット上にたくさんありましたが、今回の私の元で起こった問題を解決に導くことはありませんでした。

なぜ効かないのかをずっと調べていたら結構単純な理由だったので、ここに書きます。

自分で用意したボタンのクラス名に注意

bxsliderのライブラリを読み込んだ後にbxsliderを適用するためのJavaScriptを以下のように書きました。

ここではページ送りのボタンをnextSelectorとprevSelectorに自作のボタンのクラスを書くことで実現しています。

私が用意下ボタンのクラスは「bx-next」と「bx-prev」です。
これが問題でした。

「bx-next」クラスと「bx-prev」クラスは、bxsliderライブラリによって用意されるボタンのクラス名と同じです。
bxsliderのライブラリに標準に入っているボタンであろうが自分で用意したボタンであろうが、ボタンにはこれらふたつのクラスが付きます。

しかし上記のコード内で自作のボタンのクラスにその「bx-next」クラスと「bx-prev」クラスを当てているのでバッティングしています。
これで全くボタンが効かなかったです。

以下のように修正しました。

nextSelectorとprevSelectorに当てるクラス(今回はid)に変えました。

こうすると以下のようにページ送りのボタンのためのaタグが自動で作られます。

JavaScriptのnextSelectorとprecSelectorの子要素に「bx-prev」クラスと「bx-next」クラスが付与されているaタグが現れました。
このaタグがページ送りのボタンになります。

まとめ

bxsliderのnextSelectorとprevSelectorには「bx-prev」クラスと「bx-next」クラス以外のクラスまたはidをつけましょう。