WEBMAN

HTML,CSS,JSでハマった事のメモとWEB制作の実験場

更新日: / 公開日:

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

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

SPONSOR

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

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

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>

JavaScript

JSを書きます。

$(function() {
  $('.bxslider').bxSlider();
});

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

Callback関数 サンプル

onSliderLoad

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

$(function() {
  $('.bxslider').bxSlider({
    onSliderLoad: function(index){
      // write code here
    }
  });
});

onSlideBefore

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

  • $slideElement : スライドされて表示された要素
  • oldIndex : スライドされる前に表示されていたスライドのインデックス番号
  • newIndex : 表示されたスライドのインデックス番号

onSlideBefore DEMO

$(function() {
  $('.bxslider').bxSlider({
    onSlideBefore: function($slideElement, oldIndex, newIndex){
      // write code
    }
  });
});

onSlideAfter

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

$(function() {
  $('.bxslider').bxSlider({
    onSlideAfter: function($slideElement, oldIndex, newIndex){
      // write code
    }
  });
});

onSlideNext

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

$(function() {
  $('.bxslider').bxSlider({
    onSlideNext: function($slideElement, oldIndex, newIndex){
      // write code
    }
  });
});

onSlidePrev

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

$(function() {
  $('.bxslider').bxSlider({
    onSlidePrev: function($slideElement, oldIndex, newIndex){
      // write code
    }
  });
});

まとめ

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

参考サイト

SPONSOR

この記事をシェアする

コメント

関連記事