フロントエンドの、のりこです。

スライダーなどの便利なライブラリを多くの開発者さんが無償提供してくださっていて、利用させていただくことも多いと思いますが

ちょっと何かどうにかすればできそうなのにできない！！！

という局面に当たった事はないでしょうか？
こんなときに、親切なライブラリにはcallback関数（コールバック関数）やメソッド群が用意されていますので、ありがた～く利用してみようというお話です。

今回はbxSliderのバージョン4を使用しています。
まずは完成品をご覧いただきましょう。

はい、確かに何の変哲もないスライダーです。
が、bxSliderの場合、最初に自動再生をさせる事は出来るんですが、サムネイルをクリックしてスライドさせたとき・＜＞をクリックして前のスライドや次のスライドを表示した際に、その後自動再生が始まらず静止してしまいます。
そこを克服したのが↑のスライダーになります。
サムネイルをクリックして暫く待ってみてください。･･･また再生が始まりますね？！

html部分はスライドさせたい画像をリストタグで並べていくだけ。あとはbxSliderが勝手にソースをごにょごにょして動くようにしてくれます。

<ul id="bxslider">
<li><img src="bx_sample01.jpg" /></li>
<li><img src="bx_sample02.jpg" /></li>
<li><img src="bx_sample03.jpg" /></li>
<li><img src="bx_sample04.jpg" /></li>
</ul>

bxSliderにはjQueryが必要なのでjquery.bxslider.js（またはjquery.bxslider.min.js）よりも前に読み込むようにして置いてくださいね！jquery.bxslider.cssも適宜修正して読み込むようにしておきます。
読み込み関係の仕込が終わったらスクリプトを書き込みます。

$(function(){
obj = $('#bxslider').bxSlider({
auto: true,
pause: 2000,
onSliderLoad: function () {
timeout_id = setTimeout(null , 10000);
},
onSlideBefore: function () {
clearTimeout(timeout_id);
},
onSlideAfter: function () { 
timeout_id = setTimeout(TimeoutFunc , 3000);
},
buildPager: function(slideIndex){
switch(slideIndex){
case 0:
return '<img src="bx_sample01.jpg" alt="bx_sample01" width="120" height="62" />';
case 1:
return '<img src="bx_sample02.jpg" alt="bx_sample01" width="120" height="62" />';
case 2:
return '<img src="bx_sample03.jpg" alt="bx_sample01" width="120" height="62" />';
case 3:
return '<img src="bx_sample04.jpg" alt="bx_sample01" width="120" height="62" />';
}
}
});
});
function TimeoutFunc(){
obj.startAuto();
}

まず、スライダー自体をオブジェクトに格納しています。

obj = $('#bxslider').bxSlider({･･･

onがついているのがコールバック関数というものでここでは3種類実行しています。
スライドした後に3秒待ってからTimeoutFuncを実行するのですがpause: 2000で設定している値よりも短いとこのファンクションでスライドしてしまうのでかならず多めの数字にしておきます。
自動再生の設定に応じてスライドしたときに時限装置（timeout_id）をリセットしておかないと勝手に動いてしまうのでスライド前にリセットしています。

onSliderLoad: function () {
timeout_id = setTimeout(null , 10000);
},
onSlideBefore: function () {
clearTimeout(timeout_id);
},
onSlideAfter: function () { 
timeout_id = setTimeout(TimeoutFunc , 3000);
},

load時に何も実行しないtimeout_idを作っていますが、これは
スライド前に実行されるclearTimeout(timeout_id);
がエラーを起こさないための処理です。

TimeoutFuncは下のほうに（スライダーの外に）書かれていますが、これはあらかじめ設定されているメソッドを使用してスライダーを動かしなおすためのファンクションです。
スライダー自体をオブジェクトに格納したのはここで必要な処理でした。

function TimeoutFunc(){
obj.startAuto();
}

あくまでここで示したのは一例ですので、お好みに合わせて調整していただければと思います！！

bxSliderの詳しいoptionについてはこちらから。
ライブラリに一歩突っ込んでコントロールしてみよう！というお話でした。