Glider.jsを使う。(3)

[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
Terakoya Work - Glider

(※キャッシュ再生成中の為、SimpleAPIのサムネイルが表示されないようです。)

※ID[controls]内のリンクをクリックし指定スライドを表示させると、
内部でClick時にstop()メソッドが呼び出されてしまうため、
自動表示はストップしてしまいます。
※ループするスライドではないので、最後のスライドから最初のスライドへ
いくときの動きは若干不自然かもしれないです。

次回はGliderオブジェクト生成時のオプション引数についてです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください