吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

Plugin : bxslider

2014年3月13日 / category : jquery, plug-in-jquery

jQueryのプラグインの中でもスライダー系のプラグインは多く開発されていると思いますが、その中でbxsliderというプラグインは使いやすいと思っています。

http://bxslider.com/

簡単にお勧めポイントを紹介すると、

・レシポンシブ対応になっている
・スワイプが可能

このふたつの機能がついており、簡単に設定もできるので、予算がなかったり、スケジュールがギリギリの場合は、bxsliderを使えば簡単にスライダーを作ることができます。

ただ、このプラグイン、とても残念なことに、jqueryのバージョンは1.11以降だとバグが発生しますので、bxsliderを使う場合は、jqueryのバージョンを1.10以下にする必要があります。

使い方も簡単です。

HTML
<head>
<link rel="stylesheet" href="css/libs/jquery.bxslider.css"> //bxslider専用のCSSファイルを読み込む
<script src="js/libs/jquery.bxslider.min.js"></script> //bxsliderのJSファイルを読み込む
</head>

<body>
<div id="main">
<ul class="bxslider">
<li><img src="images/p0.jpg" title="title 0"></li>
<li><img src="images/p1.jpg" title="title 1"></li>
<li><img src="images/p2.jpg" title="title 2"></li>
<li><img src="images/p3.jpg" title="title 3"></li>
<li><img src="images/p4.jpg" title="title 4"></li>
<li><img src="images/p5.jpg" title="title 5"></li>
<li><img src="images/p6.jpg" title="title 6"></li>
</ul>
</div>
</body>
JavaScript
$('.bxslider').bxSlider();

htmlでulタグにclass名を設定し、スライド対象となる画像をliタグで括ります。jsでは、その要素を指定してあげれば、bxsliderの設定は完了です。

DEMO 0

オプション機能も多くついております。
まず、オート機能のオプションを付ける場合、

JavaScript
$('.bxslider').bxSlider({
	auto: true, //オート機能をつける
	autoControls: true //オート機能のコントロールボタンを表示する
});

DEMO 1

サムネイル画像を表示する。

HTML
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="images/tn0.jpg" /></a>
<a data-slide-index="1" href=""><img src="images/tn1.jpg" /></a>
<a data-slide-index="2" href=""><img src="images/tn2.jpg" /></a>
<a data-slide-index="3" href=""><img src="images/tn3.jpg" /></a>
<a data-slide-index="4" href=""><img src="images/tn4.jpg" /></a>
<a data-slide-index="5" href=""><img src="images/tn5.jpg" /></a>
</div>
JavaScript
$('.bxslider').bxSlider({
	pagerCustom: '#bx-pager'
});

DEMO 2

他にも、画像ごとにサイズが言葉る場合に、調整するオプションや、スライド方向を縦にするオプションなどがあります。
また、スライダーだけでなく、カルーセルとしても使用することができます。

JavaScript
$('.bxslider').bxSlider({
	slideWidth: 200, //幅
	minSlides: 2, //最小画像数
	maxSlides: 3, //最大画像数
	slideMargin: 10 //画像間のマージン
});

DEMO 3

他にも色々と機能がありそうです。ぜひ、触ってみてください。

DownLoad : DEMO DATA