こんにちわ。東京事務所の赤田です。

今日はjQueryプラグイン、bxSliderでスライド表示をした際に、
「次へ」「前へ」のナビゲーションボタンを、オリジナル画像に変更する方法を
備忘を兼ねて、まとめました。

画像をボタンに指定

bxSliderは「次へ」「前へ」ボタンを
・nextSelector
・prevSelector
のオプションで好きな場所に変更できます。
指定方法はjQueryのセレクタの指定方法と同じです。
（具体的な指定例は後で出てくるサンプルコードを参照してください）

bxSliderのCSSを上書き

bxSliderはnextSelector、prevSelectorで指定されたDOMに
<a  class="bx-prev">Prev</a>
<a  class="bx-next">Next</a>
のタグを自動で追加します。
このままだとPrevとNextの文字が、指定したナビ画像と一緒に表示されてしまいます。
そこでbxSliderのCSS指定を上書きして、文字が表示されないように調整します。
今回は文字を非表示にして、Aタグをブロック要素に変更しました。
完成したサンプルは下記になります。


これで「次へ」「前へ」ボタンを、どこでも好きな位置に、好きな画像で配置することが
出来るようになりました。

デフォルトのナビボタンで妥協せず、サイトのイメージに合わせて、
最適な画像を選択していきたいですね。


タグ ：
#jQuery
#bxSlider