[JS]Bxslider でマウスオーバーで画像をスライドさせる方法｜jQueryプラグイン・ライブラリ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[JS]Bxslider でマウスオーバーで画像をスライドさせる方法

スポンサード

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

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

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>

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);

'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);

hover でスライドするようにしたBxslider のデモはこちらです。
マウスオーバーでスライドするBxslider デモ

スポンサード