FHW BLOG仮

ライブラリの読込み

必要なライブラリは、「jQuery（jquery- latest.pack.js）」と「jCarouselLite」と二つのライブラリです。

それぞれローカルに保存し、フォルダに保存します。
ここでは、表示するHTMLフォルダに単に配置した前提で説明します。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"
src="jcarousellite.js"></script>

後ほどオプションのところで出てきますが、イージング効果を使用する場合には、イージングプラグイン （jquery.easing.1.1.js）を、また、マ ウスホイールプラグイン（jquery.mousewheel.js）を使用する場合には、それぞれのプラグイン用ライブラリを取得します。

<script type="text/javascript" src="easing.js"></script>
<script type="text/javascript" src="mousewheel.js"></script>

この二つについて特に表記位置は指示されていませんが、通常は、jquery.jsと本体プログラムの間に記述するものだと思います。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="easing.js"></script>
<script type="text/javascript" src="mousewheel.js"></script>
<script type="text/javascript"
src="jcarousellite.js"></script>

また、それぞれのオプションを使用するには、jCarouselLiteコンポーネントによりオプション指定をしなければなりません。
後述のオプションを参考にして下さい。

※それぞれのリンクを右クリックし、「名前を付けてリンク先を保存」などを選択し、ローカルへ保存してください。また、それぞれダウンロードした ファイルは、設定に応じて名前を変更し使用してください。当説明で記しているファイル名でなければ動かないというわけではありません。

HTMLの記述の仕方

div要素でul要素をくくります。
div要素のクラス名は自由ですが、後述するjCarouselLiteコンポーネント時にこの値を使用します。
li要素には、下記例では画像を指定しています。

このように「jCarouselLite」では、HTMLソース内では、div要素とそのクラス名、そしてul要素を使用する以外特に指定はありません。

<div class="carousel">
<ul>
<li><img src="image/1.jpg" alt="1"></li>
<li><img src="image/2.jpg" alt="2"></li>
<li><img src="image/3.jpg" alt="3"></li>
</ul>
</div>

但しこのままでは、画像のスクロールが行えません。
下記のオプションに従って設定してください。

オプション

■ナビゲーションボタンの設定

書式：btnPrev, btnNext : string
デフォルト：設定なし

例）
<button class="prev">戻る</button>
<button class="next">次へ</button>

これらbutton要素などを設定する場合に、div要素内に含める必要はありません。
また、button要素に限りません。
クラス属性名は任意ですが、「btnNext: "（「次へ」ボタンのクラス名）"」「btnPrev: "（「戻る」ボタンのクラス名）"」をそれぞれ記述する必要があります。

そして今後説明する全てのオプションを含め、下記のようにjCarouselLiteコンポーネントを呼び出す必要があります。

$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev"
});

この時、上記の例では「.carousel」となっている部分は、HTMLソース内に記述したdiv要素のクラス属性の値を記述します。

■表示指定ナビゲーション

書式：btnGo : [(array)]
デフォルト：設定なし

例えば、5番目の画像や10番目のコンテンツなど指定した画像等にジャンプするメニューを作成できます。
下記サンプルでは、3枚分のボタンを定義しています。

$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
btnGo: [".0", ".1", ".2"]
});

この場合HTMLは下記のように記述します。

<button class="0">1枚目</button>
<button class="1">2枚目</button>
<button class="2">3枚目</button>

こうすることで、各画像等にダイレクトでスクロールできます。
クラス属性名は数字である必要はありません。
ただし、10枚の画像があって、10枚目のボタンを作りたい場合には、「btnGo」オプションで指定する配列には、10枚分のクラス属性を指定する必要があります。

この機能を利用することにより、CSSを用いずにYhoo！トップページのニュースやiTunesのiTunesストアのようなタブ式のメニューでコンテンツを見せることができます。また、様々なエフェクトオプションが利用できるのも利点です。

■マウスホイール ※動作未確認

書式：mouseWheel : boolean
デフォルト：false

$(".carousel").jCarouselLite({
mouseWheel: true
});

jCarouselLiteは操作方法として、ボタンの他にスクロールマウスのマウスホイールを使用した方法があります。
この機能を有効にするには、2つの設定が必要です。
1つは、前述のマウスホイールのプラグインを読み込む必要があります。
もう1つは、mouseWheelオプションをtrueにセットする必要があります。
ボタンとマウスホイールは同時に使用できます。
両方を使用する場合には、下記のように二つのオプションを設定してください。

$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
mouseWheel: true
});

■オートスクロール

書式：auto : number、speed : number
デフォルト：auto：null ※オートスクロールなし、speed：200

ミリ秒単位で値を指定できるオートスクロール機能です。
autoオプションで指定する値は、2つのスライドの間隔時間です。
デフォルトはnullで、オートスクロールは無効になっています。
値を指定すると、jCarouselLiteはオートスクロールを始めます。

また、speedオプションは、スライドスピードを減速又は加速できます。
800、600、1500などのように異なった速度で試してください。
0を与えるとスライド効果がなくなります。

$(".carousel").jCarouselLite({
auto: 800,
speed: 500
});

■イージング効果 ※未確認

easing : string
デフォルト：設定なし

イージング効果を指定できます。
イージング効果を指定するには、イージングプラグインが必要です。
指定するとjCarouselLiteは 指定されたイージング効果に基づいてスライドします。

$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
easing: "bounceout"
});

■縦スクロール

書式：vertical : boolean
デフォルト：false

jCarouselLiteの 移動方向を変更します。
trueにするとjCarouselLiteは縦方向にスクロールします。
「次へ」と「戻る」ボタンはスライドを縦方向にスライドさせます。
デフォルトであるfalseでは、jCarouselLiteは横方向にスクロールします。
この場合、「次へ」と「戻る」ボタンは左から右へアイテムをスライドさせます。

$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
vertical: true
});

■エンドレス設定

書式：circular : boolean
デフォルト：true

trueにセットするとエンドレスにコンテンツが表示されます。
これにより、最終要素到達時の「次へ」をクリックした時に、自動的に最初のコンテンツへスライドし、また、最初の要素で「戻る」を指定した場合にも同様の動きとなります。
falseにすると、最終要素到達後に「次へ」ボタンをクリックしても、また、最初の要素で「戻る」ボタンを押しても、それぞれの要素から動きません。

$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
circular: false
});

■表示アイテム数の指定

書式：visible : number
デフォルト：3

表示するアイテム数を指定します。
デフォルトは3です。
小数点を含む実数での設定も可能です。
"3.5"であれば、3つが完全に見え、最後の1つは半分見えます。
これによりユーザに更に右に画像があることを見せることができユーザビリティ効果があります。

$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 4
});

■開始番号の指定

書式：start : number
デフォルト：0

どのコンテンつから表示を開始するかを指定できます。
jCarouselLiteで の最初のアイテム番号は"0"です。

$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
start: 2
});

■スクロール数の指定

書式：scrool : number
デフォルト：1

「次へ」又は「戻る」ボタンをクリックしたときにスクロール又はスライドする件数です。
デフォルトでは、1つずつスクロールします。

$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
scroll: 2
});

■コールバック関数

beforeStart, afterEnd : コールバック関数

スライド開始前又は終了後に何らかのイベントを設定する場合に、これらの2つのコールバックを利用すると便利です。
関数が返す値は、コールバック時に見えているアイテムを配列として返します。

$(".carousel").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
beforeStart: function(a) {
alert("Before animation starts:" + a);
},
afterEnd: function(a) {
alert("After animation ends:" + a);
}
});