[JS]Bxsliderでクリックではなくhover（マウスオーバー）で画像をスライドさせる方法

jQueryプラグイン・ライブラリ

2014.04.26

レスポンシブWEBデザイン対応で、カルーセルやサムネイルページャー（サムネイル付きスライド）などが可能な高機能スライドプラグインBxsliderですが、

サムネイルやページングのリンクを「クリック（click）」するのではなく、「マウスオーバー（hover）」で画像をスライドさせるというカスタマイズが必要になったので、今回はその方法をまとめました。

Bxslider のダウンロード
Bxslider の設置
hoverでスライドするようにjquery.bxslider.jsファイルの変更

Bxslider のダウンロード

以下よりbxSliderのファイルをダウンロードします。
The Responsive jQuery Content Slider

Bxslider の設置

Bxsliderの基本的な使い方はレスポンシブWEBデザイン対応のjQuery スライダープラグイン「bxSlider」の記事でも紹介させていただいていますが、

ダウンロードしたjquery.bxslider.jsファイルとjQueryファイル、CSSファイルを<head>内に設置します。

<link href="./bxslider/jquery.bxslider.css" rel="stylesheet" />
<script src="./jquery.min.js"></script>
<script src="./bxslider/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
    $('.bxslider').bxSlider();
});
</script>

$(document).ready(function(){

$('.bxslider').bxSlider();

});

</script>

hoverでスライドするようにjquery.bxslider.jsファイルの変更

hover（マウスオーバー）で画像がスライドするように、jquery.bxslider.jsファイル内の’click’の記述を’hover’に置き換えます。

BxSlider v4.1.2のファイルであれば、該当個所はこの辺りだと思います。

slider.controls.autoEl.on('click' , '.bx-start', clickStartBind);
slider.controls.autoEl.on('click' , '.bx-stop', clickStopBind);
slider.pagerEl.on('click' , 'a', clickPagerBind);
slider.controls.next.bind('click' , clickNextBind);
slider.controls.prev.bind('click' , clickPrevBind);

slider.controls.autoEl.on('click' , '.bx-start', clickStartBind);

slider.controls.autoEl.on('click' , '.bx-stop', clickStopBind);

slider.pagerEl.on('click' , 'a', clickPagerBind);

slider.controls.next.bind('click' , clickNextBind);

slider.controls.prev.bind('click' , clickPrevBind);

'click'の箇所を'hover'に置換します。

slider.controls.autoEl.on('hover' , '.bx-start', clickStartBind);
slider.controls.autoEl.on('hover' , '.bx-stop', clickStopBind);
slider.pagerEl.on('hover' , 'a', clickPagerBind);
slider.controls.next.bind('hover' , clickNextBind);
slider.controls.prev.bind('hover' , clickPrevBind);