定番のスライドショーjQueryプラグイン「bxSlider」の Callback関数まとめ
投稿日：2017年01月04日
あけましておめでとうございます、ナガです。
簡単にスライダーを実装できて、オプションも豊富で、案件では大変お世話になっているjQueryプラグイン「bxSlider」。
2017年一発目のエントリーは、「bxSlider」の Callback関数についてまとめさせていただきます。
はじめに
「bxSlider」を実装するときにオプションの値はどんなのあったっけなーと思って、よくググるんですが、 Callback関数を使ったサンプルを掲載しているエントリーがサクッと出てこなかったので、備忘録がてら自分で書いてみます。
※見つからなかったのは僕のググり方が悪いだけかもしれませんが…。
使い方
ダウンロード
先ずは「bxSlider」を下記サイト右上のボタンからダウンロードします。
ファイルの読み込み
ダウンロードしたら必要なファイルを読み込みます。
<!-- jQuery本体は は 1.8.2 以上を読み込んでください。 以下だと上手く動作しません -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider.min.js を読み込む -->
<script src="jquery.bxslider.min.js"></script>
<!-- bxSlider.css を読み込む -->
<link href="jquery.bxslider.css" rel="stylesheet" />
2
3
4
5
6
HTML
スライド部分をマークアップします。
<ul class="bxslider">
<li><img src="//placehold.jp/1290x240.png"></li>
<li><img src="//placehold.jp/1290x240.png"></li>
<li><img src="//placehold.jp/1290x240.png"></li>
<li><img src="//placehold.jp/1290x240.png"></li>
</ul>
2
3
4
5
6
JavaScript
JSを書きます。
$(function() {
$('.bxslider').bxSlider();
});
2
3
以上で、基本的には使えます。
オプションを設定して、スライドの遷移方法やスライドスピードを変更したりできます。
どんなオプションが設定できるかはbxSlider公式を参照していただくと良いかと思います。
Callback関数 サンプル
onSliderLoad
スライダーが読み込みこまれたタイミングで実行されます。
DEMOではスライドが読み込まれたら console が表示されるので chrome や Firefox の検証機能で確認してください。
引数にはスライドが読み込まれたときに表示されているスライドのインデックス番号が入ります。
$(function() {
$('.bxslider').bxSlider({
onSliderLoad: function(index){
// do something
}
});
});
2
3
4
5
6
7
onSlideBefore
スライドする直前に実行されます。
引数には下記が入ります。
onSlideAfter、onSlideNext、onSlidePrev にも同じ引数が入ります。
$slideElement: スライドされて表示された要素oldIndex: スライドされる前に表示されていたスライドのインデックス番号newIndex: 表示されたスライドのインデックス番号
$(function() {
$('.bxslider').bxSlider({
onSlideBefore: function($slideElement, oldIndex, newIndex){
// do something
}
});
});
2
3
4
5
6
7
onSlideAfter
スライドした直後に実行されます。
$(function() {
$('.bxslider').bxSlider({
onSlideAfter: function($slideElement, oldIndex, newIndex){
// do something
}
});
});
2
3
4
5
6
7
onSlideNext
次へボタンがクリックされた（ goToNextSlide ）直後に実行されます。
$(function() {
$('.bxslider').bxSlider({
onSlideNext: function($slideElement, oldIndex, newIndex){
// do something
}
});
});
2
3
4
5
6
7
onSlidePrev
前へボタンがクリックされた（ goToPrevSlide ）直後に実行されます。
$(function() {
$('.bxslider').bxSlider({
onSlidePrev: function($slideElement, oldIndex, newIndex){
// do something
}
});
});
2
3
4
5
6
7
まとめ
これらの callback関数を使えば、スライド読み込まれたらモーダルを表示させたり、ページャや左右のボタンにツールチップを表示させたり、スライドする要素の data 属性のデータを取得して、スライド外の要素に表示させたりと、カスタマイズの可能性が広がるかと思います。