jQuery入門講座：カルーセル CarouFredSel(5)

カルーセル CarouFredSel(5)

概要と組み込み

carouFredSelは色々なオプションを選択することができます。ここでは前回に引き続きcarouFredSelのオプションについて説明していきます。

構文

前回に引き続きcarouFredSelのオプションを説明します。今回紹介するのは下表の赤字のオプションです。

カルーセルの設定返値：jQueryオブジェクト: jQo.carouFredSel( オプション )
※オプションはobjectオブジェクトで設定し、以下のプロパティを利用してカルーセルの詳細を操作します。
※プロパティには以下の種類があります。
・circular…trueでループ指定、falseでは先頭に戻る演出（デフォルトはtrue）
・infinite…上記circularの設定がfalseの時のみ利用できます。falseに設定すると最後で停止します。
・responsive…親要素のサイズに合わせて子要素のサイズを変更するか否か（デフォルトはfalse）
・direction…「left」「right」「up」「down」でスライド方向の設定（デフォルトはleft）
・width…幅の設定。数値の他に%やautoの設定が可能。variableを設定するとサムネイルの幅に応じて変化
・height…高さの設定。数値の他に%やautoの設定が可能。variableを設定するとサムネイルの幅に応じて変化
・align…「center」「left」「right」で整列位置の設定（デフォルトはcenter）
・padding…paddingの設定。配列を利用することで個別設定が可能
・synchronise…他のカルーセルと同期させる
・cookie…サムネイルの位置をクッキーに記憶させるか否か
・onCreate…カルーセルを作成した時に実行したい処理を設定
・items…サムネイルについての詳細設定
・scroll…スクロールについての詳細設定
・auto…自動スクロールについての詳細設定
・prev…prevボタンの動作についての詳細設定
・next…nextボタンの動作についての詳細設定
・pagination…ページ表示についての詳細設定
・swipe…スワイプ処理についての詳細設定
・mousewheel…マウスホイールについての詳細設定

解説

演出の変更(1)

CarouFredSelプラグインではサムネイルをスライドさせるだけではなく、様々な演出で切り替えることができます。まずは演出をOFFにしたサンプルを紹介します。サンプル（fred5/01.html）を開いてjQueryが以下の様に記述されている事を確認して下さい。

scrollプロパティはサムネイルを切り替える仕様を設定します。設定できる仕様が多くあるためautoプロパティやitemプロパティ同様にobjectオブジェクトを設定します。演出の設定はfxプロパティを利用し、ここに「none」と設定することで演出をOFFにできます。

var carouObj = new Object();
carouObj.scroll = {fx:"none"};
$("ul").carouFredSel(carouObj);

結果としてサムネイルが切り替わる際の演出がOFFになり、時間がたつとサムネイルが突然入れ替わります。fxプロパティには他にも設定ができるので、以下に列挙しました。それぞれサンプルを確認して下さい。

フェード：fxプロパティに「fade」を設定。→サンプル（fred5/01b.html）
クロスフェード：fxプロパティに「crossfade」を設定。→サンプル（fred5/01c.html）
カバー：fxプロパティに「cover」を設定。→サンプル（fred5/01d.html）
カバーフェード：fxプロパティに「cover-fade」を設定。→サンプル（fred5/01e.html）
アンカバー：fxプロパティに「uncover」を設定。→サンプル（fred5/01f.html）
アンカバーフェード：fxプロパティに「uncover-fade」を設定。→サンプル（fred5/01g.html）

scrollプロパティには他にも色々設定できるので、引き続き説明していきます。

演出の変更(2)

scrollプロパティのdurationプロパティを変更することで、演出にかける時間を変更できます。サンプル（fred5/02.html）を開いてjQueryを確認して下さい。

以下の様にscrollプロパティにdurationプロパティが設定され、値として3000（ミリ秒）が設定しているので、3秒かけてスクロールするようになります。切り替わるまでに10秒ほど掛かるのでしばらくお待ち下さい

var carouObj = new Object();
carouObj.scroll = {duration:3000};
$("ul").carouFredSel(carouObj);

サンプルfred5/02.htmlで確認できるように、durationプロパティを設定すると「その値によって停止時間も変わる」ようで、場合によってはサムネイルが切り替わるのに結構な時間がかかります。これを回避したい場合はニュースティッカーを作成した時のようにautoプロパティを利用して停止時間を変更しましょう。
→参考：サンプル（fred5/02b.html）

var carouObj = new Object();
carouObj.auto = 3000;
carouObj.scroll = {duration:3000};
$("ul").carouFredSel(carouObj);

autoプロパティとscrollプロパティを上手く利用すると、メリーゴーランドのように移動し続けるサムネイルが作成できます。サンプル（fred5/03.html）を開いてautoプロパティが以下の様に0に設定されていることを確認して下さい。

var carouObj = new Object();
carouObj.auto = 0;
carouObj.scroll = {duration:3000};
$("ul").carouFredSel(carouObj);

しかし、スクロールにイージングが付いているためスムースにスクロールしません、そこでイージングの設定を変更します。サンプル（fred5/03b.html）を開いてscrollプロパティに設定したobjectオブジェクトにeasingプロパティが追加されていることを確認して下さい。easingプロパティに設定できる値は「linear」「swing」「quadratic」「cubic」「elastic」の5種類です。

var carouObj = new Object();
carouObj.auto = 0;
carouObj.scroll = {
	duration:3000,
	easing:"linear"
};
$("ul").carouFredSel(carouObj);

easingプロパティにlinerを設定することで、移動が等速になりメリーゴーランドのように連続してスクロールするようになります。

マウスオーバーで停止

nivo sliderと異なりcarouFredSelはマウスオーバーしても処理が停止しません。しかしオプションでマウスオーバーで停止するようにできます。サンプル（fred5/04.html）を開いてjQueryが以下の様に記述されていることを確認して下さい。

まずマウスオーバーで停止する機能が確認しやすいようにautoプロパティに1000を設定して、1秒ごとに切り替わるようにしました（2行目）。さらにscrollプロパティのdurationプロパティを3000に設定して3秒かけてスライドするようにしました（4行目）。

var carouObj = new Object();
carouObj.auto = 1000;
carouObj.scroll = {
	duration:3000,
	pauseOnHover:true
};
$("ul").carouFredSel(carouObj);

そしてポイントなのが5行目です。pauseOnHoverプロパティをtrueにすることで、カルーセルにマウスオーバーした場合にサムネイルが切り替わるのを停止します。実際にカルーセルにマウスを重ねて、サムネイルが切り替わらないことを確認して下さい。

fred5/04.htmlはサムネイルがスライド中にマウスオーバーしても急に停止することはありません。しかしpauseOnHoverプロパティの値を変更することで急停止させることもできます。

サンプル（fred5/04b.html）を開いてpauseOnHoverプロパティの値が「immediate」に変更されていることを確認して下さい。この設定であればマウスオーバーするとすぐに停止しますが、fred5/04.htmlの方が違和感がないと思います。

var carouObj = new Object();
carouObj.auto = 1000;
carouObj.scroll = {
	duration:3000,
	pauseOnHover:"immediate"
};
$("ul").carouFredSel(carouObj);

この設定はサンプル（fred5/03b.html）のように常に移動し続けるカルーセルに利用すると良いでしょう。

サンプル（fred5/05.html）を開いてjQueryが以下の様に記述されている事を確認して下さい。fred5/03b.htmlの設定にpauseOnHoverプロパティの設定を追加しているだけです。

var carouObj = new Object();
carouObj.auto = 0;
carouObj.scroll = {
	duration:3000,
	easing:"linear",
	pauseOnHover:"immediate"
};
$("ul").carouFredSel(carouObj);

結果として、マウスオーバーするとサムネイルがすぐに停止するようになります。

メモ

コールバックの設定

あまり利用することはないかもしれませんが、scrollプロパティにはコールバックの設定ができます。サンプル（fred5/test01.html）を開いてjQueryが以下の様に記述されていることを確認して下さい。

scrollプロパティに設定するobjectオブジェクトにonBeforeプロパティやonAfterプロパティを設定すると、スライド前に実行するfunctionやスライド後に実行するfunctionを設定することができます。

var carouObj = new Object();
carouObj.scroll = {
	onBefore:function( data ) {
		$(".thumb-wrapper").addClass("active");
	},
	onAfter:function( data ) {
		$(".thumb-wrapper").removeClass("active");
	}
};
$("ul").carouFredSel(carouObj);

サンプルではaddClassメソッドとremoveClassメソッドを利用して「activeクラス」を脱着しています。activeクラスはcss設定で以下の様に記述されているので、スライドが開始される（onBefore）と背景色がピンクになり、スライドが停止すると（onAfter）もとに戻ります。

.active{
	background-color:#fdd;
}

次回はスマートフォン用のコンテンツ作成にも利用できるswipeプロパティなどについても説明したいと思います。

次のページ：スマホでカルーセル(1)