Glider.jsを使う。(4)

[glider.js]
http://www.missingmethod.com/projects/glider.html
紙芝居のようなスライド表示を行うJavaScriptライブラリです。

今回はオプション引数と、簡単なCSSカスタマイズを行います。

[Gliderオブジェクト]
var my_glider = new Glider('[スライドID]');

[オプション引数]
Gliderオブジェクト生成時に、配列の形式でオプションを指定できます。
オプション指定できるのは、以下の二つの数値です。

【duration】
スライドが切り替わる時間(動いている時間)を指定します。
デフォルトは1.0(秒)です。

【frequency】
スライドが静止している時間を指定します。
デフォルトは3(秒)です。
var my_glider = new Glider('[スライドID]', {duration:[数値],frequency:[数値]});
配列の形であれば、どちらか一方だけを指定してもかまいません。

[duration時間>frequency時間]と指定すると、
物理的にスライド表示ができなくなるため、
画面がぶれてしまうので注意が必要です。

[CSSカスタマイズ]
各class名とidが明記されているので、それぞれのスタイルをカスタマイズするのは簡単です。
プログラム上指定されているので、以下のクラス名は変更できません。

*scroller
*section
*controls(アンカー指定用クラス)

そのほかに関しては(主にid名)は変更しても問題なくプログラムは動きます。
今回のサンプルでは各スライドに指定するidを独自のものに変更し、
それぞれに背景をつけます。
<div id="スライドID">
  <div class="scroller">
    <div class="content">
      <div class="section" id="【このidを指定】">
        <!-- ここにコンテンツを記述 -->
      </div>
      ・・・・・・
    </div>
  </div>      
</div>

各スライドに指定するidを独自に設定できるので、
画像だけでなく、きちんとしたHTMLコンテンツも簡単に組み込めますね。

[サンプル]
オプション引数に[{duration:0.5,frequency:2}]を指定し、
各スライドには以下のCSSを設定しました。
div#1枚目のid{
    background:#f3f3f3;
    color:#aa7b7b;
}
div#2枚目のid{
    background:#feffdc;
    color:#aa7b7b;
}
div#3枚目のid{
    background:url(../images/back.gif);
    color:#fb08b3;
    font-weight:bold;
}

※文字色と背景を指定しただけです。。。

Terakoya Work – Glider
Terakoya Work - Glider

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

[class:contentについて]
contentクラスはjsファイル上は特に明示的に使用されていません。
しかし、cssファイル内で、[width: 10000px;]の指定がされています。
この指定により、画像のスライドを表現しています。
(widthの数値が小さいと、上下の移動になります。)

スライド自体は行われますが、contentクラス名を変える場合、
[width: 10000px;]の指定を忘れずにする必要があります。

コメントを残す

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

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