定番のスライドショーjQueryプラグイン「bxSlider」の Callback関数まとめ

投稿日:2017年01月04日

Tags: CSS HTML JavaScript jQuery

あけましておめでとうございます、ナガです。

簡単にスライダーを実装できて、オプションも豊富で、案件では大変お世話になっている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" />
1
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>
1
2
3
4
5
6

JavaScript

JSを書きます。

$(function() {
  $('.bxslider').bxSlider();
});
1
2
3

以上で、基本的には使えます。
オプションを設定して、スライドの遷移方法やスライドスピードを変更したりできます。 どんなオプションが設定できるかはbxSlider公式を参照していただくと良いかと思います。

Callback関数 サンプル

onSliderLoad

スライダーが読み込みこまれたタイミングで実行されます。
DEMOではスライドが読み込まれたら console が表示されるので chromeFirefox の検証機能で確認してください。
引数にはスライドが読み込まれたときに表示されているスライドのインデックス番号が入ります。

$(function() {
  $('.bxslider').bxSlider({
    onSliderLoad: function(index){
      // do something
    }
  });
});
1
2
3
4
5
6
7

onSlideBefore

スライドする直前に実行されます。
引数には下記が入ります。
onSlideAfteronSlideNextonSlidePrev にも同じ引数が入ります。

  • $slideElement : スライドされて表示された要素
  • oldIndex : スライドされる前に表示されていたスライドのインデックス番号
  • newIndex : 表示されたスライドのインデックス番号
$(function() {
  $('.bxslider').bxSlider({
    onSlideBefore: function($slideElement, oldIndex, newIndex){
      // do something
    }
  });
});
1
2
3
4
5
6
7

onSlideAfter

スライドした直後に実行されます。

$(function() {
  $('.bxslider').bxSlider({
    onSlideAfter: function($slideElement, oldIndex, newIndex){
      // do something
    }
  });
});
1
2
3
4
5
6
7

onSlideNext

次へボタンがクリックされた( goToNextSlide )直後に実行されます。

$(function() {
  $('.bxslider').bxSlider({
    onSlideNext: function($slideElement, oldIndex, newIndex){
      // do something
    }
  });
});
1
2
3
4
5
6
7

onSlidePrev

前へボタンがクリックされた( goToPrevSlide )直後に実行されます。

$(function() {
  $('.bxslider').bxSlider({
    onSlidePrev: function($slideElement, oldIndex, newIndex){
      // do something
    }
  });
});
1
2
3
4
5
6
7

まとめ

これらの callback関数を使えば、スライド読み込まれたらモーダルを表示させたり、ページャや左右のボタンにツールチップを表示させたり、スライドする要素の data 属性のデータを取得して、スライド外の要素に表示させたりと、カスタマイズの可能性が広がるかと思います。

参考サイト

Last Updated: 2019-9-9 21:37:59