• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

Bxslider のダウンロード

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


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 デモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください