レスポンシブデザインにも対応した高性能なスライダー【bxslider】の設置

どうもこんばんは。Toshikuraです。今回のTipsは【レスポンシブデザインにも対応した高性能なスライダー【bxslider】の設置】です。以前TIPSにて【jQuery 簡単かつ高性能なスライダー【bxslider】の設置】という記事を書きました。本家の方ではレスポンシブデザインに対応したスライダーへバージョンアップされていましたので、追記版としてメモしておきたいと思いました。スマートフォンでも問題なく表示されるのは嬉しいです。スライドの動きもCSS3を使用している為とてもスムーズです。

設置方法 　> 　DEMO 　> 　DOWLOAD

設置方法は変わらずシンプルです。プラグインを読み込みdivやliの階層を書くだけです。
プラグインのダウンロードは本家サイトより行えます。
　
対応ブラウザ
Firefox, Chrome, Safari, iOS, Android, IE7+
　
読み込みファイル

<link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css">
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.bxslider.js"></script>

HTML

<div id="slider">
	<div><img src="images/new1.jpg"></div>
	<div><img src="images/new2.jpg"></div>
	<div><img src="images/new3.jpg"></div>
</div>

JS

$(function(){
	$(‘#slider’).bxSlider();
});

　

拡張機能 – 前|次

ページングや矢印も必要になってくるかと思います。細かいカスタマイズも簡単に実施できます。
　
HTML

<div id="slider">
	<div><img src="images/new1.jpg"></div>
	<div><img src="images/new2.jpg"></div>
	<div><img src="images/new3.jpg"></div>
</div>
<span id="slider-prev"></span> | <span id="slider-next"></span>

JS

$(function(){
	$(‘#slider’).bxSlider({
		nextSelector: ‘#slider-next’,
		prevSelector: ‘#slider-prev’,
		nextText: ‘>>’,
		prevText: ‘<<‘
	});
});

　

拡張機能 – ページング

ページングの設定も以下のように実装可能です。
　
HTML

<div id="slider">
	<div><img src="images/new1.jpg"></div>
	<div><img src="images/new2.jpg"></div>
	<div><img src="images/new3.jpg"></div>
</div>
<div id="nvs">
	<a data-slide-index="0">1</a>
	<a data-slide-index="1">2</a>
	<a data-slide-index="2">3</a>
</div>

JS

$(function(){
	$(‘#slider’).bxSlider({
		captions: true,
		pagerCustom:’#nvs’
	});
});

イージング一覧はコチラを参照
　

その他細かい設定に関して – DEMO

ページングの数字をサムネイル画像に変更、矢印を変更するなど、もっと細かい設定を施したい場合もあるかと思います。今回はメモとしてコチラにまとめて設定例を作成しておきましたのでもし宜しければご参照下さい。
　

以上です。