bxSliderで「次へ」「前へ」ボタンをオリジナル画像に変更する

概要

• bxSliderで表示する「次へ」「前へ」のナビゲーションボタンをオリジナルの画像に差し替えます。
• bxSliderに同梱されているナビ画像、CSSには手を入れません。

HTMLとCSS

• スライダーエリアの左右にnaviボタンを配置
• CSSは必ずjquery.bxslider.min.cssの後に読み込むよう指定

ナビ部分のcss

.feed-prev-btn {
  background-image: url(../images/btn_prev.png);
}
.feed-next-btn{
  background-image: url(../images/btn_next.png);
}
.feed-prev-btn:hover {
  background-image: url(../images/btn_prev_on.png);
}
.feed-next-btn:hover{
  background-image: url(../images/btn_next_on.png);
}
.feed-prev-btn .bx-prev {
  width: 100%;
  display: block;
}
.feed-next-btn .bx-next {
  width: 100%;
  display: block;
}
.navi-btn {
  margin: 79px 8px 0 9px;
  width: 23px;
  height: 23px;
  -webkit-background-size: 23px;
  background-size: 23px;
  background-repeat: no-repeat;
  background-position: center center;
  float: left;
}

sliderエリア

<div class="contents-list">
    <div class="navi-btn feed-prev-btn" id="feed-prev-btn"></div>
    <ul class="slider-area" id="feed">
        <li>ここにスライダー表示する要素を複数並べる</li>
        <li>ここにスライダー表示する要素を複数並べる</li>
        <li>ここにスライダー表示する要素を複数並べる</li>
    </ul>
    <div class="navi-btn feed-next-btn" id="feed-next-btn"></div>
</div>

bxSliderの指定

• 今回は自動スライドする設定にしています
• スライダーとnaviボタンにホバーしたときには自動スライドを停止させている

bxSliderの指定

var bxParam = {
    auto: true,//自動スライドの実施
    pause: 5000,//自動スライドの待ち時間
    autoHover: true,//スライダーにホバーしたときに自動スライドを停止
    minSlides: 5,//一度に表示させるスライドの最小数
    maxSlides: 5,//一度に表示させるスライドの最大数
    moveSlides: 5,//一度に移動するスライド数
    slideWidth: 164,//各スライドの幅を指定
    slideMargin: 10,//各スライド間の余白を設定
    controls: true,//前後のコントロールを追加するかどうかの設定
    pager: false,//ページ送りを追加するかどうかの設定
    nextSelector: "#feed-next-btn",//オリジナルのナビエリアを、
    prevSelector: "#feed-prev-btn",//jQueryのセレクタで指定できる
};

$(function () {
	var slider = $("#feed").bxSlider(bxParam);
        //naviボタンがオリジナルのため、ホバー時の処理を手動で実装
	$(".navi-btn").on({
	    "mouseenter": function(){slider.stopAuto();},
	    "mouseleave": function(){slider.startAuto();}
	});
});

• nextSelector、prevSelectorオプションで画像ボタンを背景表示しているdivを指定
• これで、prevSelectorで指定したdivにbxSliderが、<a class="bx-prev">Prev</a>といったタグを追加してくれる(nextSelectorも同様)
• 上記のCSSでbxSliderが追加したAタグをブロック要素に変えて、文字を非表示にしている

まとめ

• ナビゲーションエリアをjQueryのセレクタで指定できるため、色々と応用が利く
• 画像ボタンに限らず、どんな場所でもnaviボタン化できる