jQuery 簡単かつ高性能なスライダー【bxslider】の設置 – Divスライド系の中では一番のオススメです。

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。


どうもこんばんは!
今日は【bxslider】について書きたいと思います。jQueryプラグインにはたくさんのスライダー系プラグインがありますが、個人的にこのbxsliderで一通りの動きがカバーできると思います。
 

【bxslider】レスポンシブデザイン対応版の記事はこちら

アップデートによりレスポンシブデザイン対応版に変更されていましたので、改めてメモとして記事にまとめております。CSS3のアニメーションを組み込んでスライドがさらにスムーズな動作になっています。※レスポンシブ版の方はイージングの選択の幅が狭い事やIE6が非対応だったり等、若干の癖がありますので、こちらで記事化したバージョンと使い分ける事をオススメします。

設置方法 > DEMO > DOWLOAD

設置方法も非常にシンプルです。プラグインを読み込みdivやliの階層を書くだけ。
プラグインのダウンロードは本家サイトより行えます。


<script src="js/jquery.1.X.X.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.bxSlider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(‘#slider1’).bxSlider();
});
</script>
<div id="slider1">
<div>111</div>
<div>222</div>
<div>333</div>
</div>

拡張機能 – 前|次

上ではただ設置しただけですが、実用化するにはページングや矢印も必要になってくるかと思います。このプラグインでは細かいカスタマイズも簡単に実施できます。
 

.pager-active{color: #f00;}


<script type="text/javascript">
$(document).ready(function(){
$(‘#slider3’).bxSlider({
auto: true,
pager: true
});
});
</script>

拡張機能 – スライドの間隔とイージングの設定


<script type="text/javascript">
$(document).ready(function(){
$(‘#slider5’).bxSlider({
auto: true,
pager: true,
speed: 1000,
easing: ‘easeOutBounce’
});
});
</script>

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

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

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

以上です。