[glider.js]
http://www.missingmethod.com/projects/glider.html
紙芝居のようなスライド表示を行うJavaScriptライブラリです。
前回、基本的なスライド表示ができるようになったので
今回はGliderオブジェクトで使用できるメソッドについて調べていきます。
[Gliderオブジェクト]
var my_glider = new Glider('[スライドID]');
◆指定スライドを表示
指定スライドを表示する場合、ID[controls]内にリンクを用意し、
リンクのアンカーにスライド表示する要素IDを指定すればOKです。
<a href="#section1">Section 1</a>
このときglider.js内部でmoveToメソッドがよばれています。
my_glider.moveTo(element, container, options);
—–
element：アンカーで指定したスライドid
container：要素ID[scroller]のオブジェクト（スライド表示部）
options：スライドする時間間隔
—–
これらの引数が内部で自動的に設定されています。
◆前のスライド・次のスライドを表示
Gliderオブジェクトのメソッドで、前のスライド・次のスライドを表示させることができます。
[前のスライドを表示]
my_glider.previous();
[次のスライドを表示]
my_glider.next();
リンクのOnClickイベント発生時に、上記メソッドがよばれるように設定しておけば
「前へ」「次へ」の動きを実装できます。
[使用例]
<a href="#" onclick="my_glider.previous();return false;"><< 前へ</a>
<a href="#" onclick="my_glider.next();return false;">次へ >></a>
◆スライド自動開始
特に設定を行わなければ、このスライドショーは
リンクを押したときにしか動作しません。
HTMLのロードと同時にスライドを開始させるには、
JavaScriptのタイマー機能を使います。
my_glider.start();
start()メソッドを呼び出すと、glider.js内部でtimerオブジェクトが使用され
一定の間隔で自動的にスライドがきりかわります。
◆サンプルです
前回と同じ写真スライドに、前へ・次へリンクをつけ、
ロード時には自動スライドを行うよう設定しました。
Terakoya Work – Glider
（※キャッシュ再生成中の為、SimpleAPIのサムネイルが表示されないようです。）
※ID[controls]内のリンクをクリックし指定スライドを表示させると、
内部でClick時にstop()メソッドが呼び出されてしまうため、
自動表示はストップしてしまいます。
※ループするスライドではないので、最後のスライドから最初のスライドへ
いくときの動きは若干不自然かもしれないです。
次回はGliderオブジェクト生成時のオプション引数についてです。