CarouFredSel(5)概要と組み込みcarouFredSelは色々なオプションを選択することができます。ここでは前回に引き続きcarouFredSelのオプションについて説明していきます。前回に引き続きcarouFredSelのオプションを説明します。今回紹介するのは下表の赤字のオプションです。)※オプションはobjectオブジェクトで設定し、以下のプロパティを利用してカルーセルの詳細を操作します。※プロパティには以下の種類があります。・circular...trueでループ指定、falseでは先頭に戻る演出(デフォルトはtrue)・infinite...上記circularの設定がfalseの時のみ利用できます。falseに設定すると最後で停止します。・responsive...親要素のサイズに合わせて子要素のサイズを変更するか否か(デフォルトはfalse)・direction...「left」「right」「up」「down」でスライド方向の設定(デフォルトはleft)・width...幅の設定。数値の他に%やautoの設定が可能。・height...高さの設定。数値の他に%やautoの設定が可能。・align...「center」「left」「right」で整列位置の設定(デフォルトはcenter)・padding...paddingの設定。変更(1)CarouFredSelプラグインではサムネイルをスライドさせるだけではなく、様々な演出で切り替えることができます。演出をOFFにしたサンプルを紹介します。サンプル(fred5/01.html)を開いてjQueryが以下の様に記述されている事を確認して下さい。scrollプロパティはサムネイルを切り替える仕様を設定します。設定できる仕様が多くあるためautoプロパティやitemプロパティ同様にobjectオブジェクトを設定します。演出の設定はfxプロパティを利用し、ここに「none」と設定することで演出をOFFにできます。{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秒かけてスクロールするようになります。{duration:3000};$("ul").carouFredSel(carouObj);サンプルfred5/02.htmlで確認できるように、durationプロパティを設定すると「その値によって停止時間も変わる」ようで、場合によってはサムネイルが切り替わるのに結構な時間がかかります。これを回避したい場合はニュースティッカーを作成した時のようにautoプロパティを利用して停止時間を変更しましょう。{duration:3000};$("ul").carouFredSel(carouObj);autoプロパティとscrollプロパティを上手く利用すると、メリーゴーランドのように移動し続けるサムネイルが作成できます。サンプル(fred5/03.html)を開いてautoプロパティが以下の様に0に設定されていることを確認して下さい。{duration:3000};$("ul").carouFredSel(carouObj);しかし、スクロールにイージングが付いているためスムースにスクロールしません、そこでイージングの設定を変更します。サンプル(fred5/03b.html)を開いてscrollプロパティに設定したobjectオブジェクトにeasingプロパティが追加されていることを確認して下さい。easingプロパティに設定できる値は「linear」「swing」「quadratic」「cubic」「elastic」の5種類です。{duration:3000,easing:"linear"};$("ul").carouFredSel(carouObj);easingプロパティにlinerを設定することで、移動が等速になりメリーゴーランドのように連続してスクロールするようになります。sliderと異なりcarouFredSelはマウスオーバーしても処理が停止しません。オプションでマウスオーバーで停止するようにできます。サンプル(fred5/04.html)を開いてjQueryが以下の様に記述されていることを確認して下さい。マウスオーバーで停止する機能が確認しやすいようにautoプロパティに1000を設定して、1秒ごとに切り替わるようにしました(2行目)。scrollプロパティのdurationプロパティを3000に設定して3秒かけてスライドするようにしました(4行目)。{duration:3000,pauseOnHover:true};$("ul").carouFredSel(carouObj);そしてポイントなのが5行目です。pauseOnHoverプロパティをtrueにすることで、カルーセルにマウスオーバーした場合にサムネイルが切り替わるのを停止します。実際にカルーセルにマウスを重ねて、サムネイルが切り替わらないことを確認して下さい。fred5/04.htmlはサムネイルがスライド中にマウスオーバーしても急に停止することはありません。pauseOnHoverプロパティの値を変更することで急停止させることもできます。サンプル(fred5/04b.html)を開いてpauseOnHoverプロパティの値が「immediate」に変更されていることを確認して下さい。この設定であればマウスオーバーするとすぐに停止しますが、fred5/04.htmlの方が違和感がないと思います。{duration:3000,pauseOnHover:"immediate"};$("ul").carouFredSel(carouObj);この設定はサンプル(fred5/03b.html)のように常に移動し続けるカルーセルに利用すると良いでしょう。サンプル(fred5/05.html)を開いてjQueryが以下の様に記述されている事を確認して下さい。fred5/03b.htmlの設定にpauseOnHoverプロパティの設定を追加しているだけです。{duration:3000,easing:"linear",pauseOnHover:"immediate"};$("ul").carouFredSel(carouObj);結果として、マウスオーバーするとサムネイルがすぐに停止するようになります。メモコールバックの設定あまり利用することはないかもしれませんが、scrollプロパティにはコールバックの設定ができます。サンプル(fred5/test01.html)を開いてjQueryが以下の様に記述されていることを確認して下さい。scrollプロパティに設定するobjectオブジェクトにonBeforeプロパティやonAfterプロパティを設定すると、スライド前に実行するfunctionやスライド後に実行するfunctionを設定することができます。removeClassメソッドを利用して「activeクラス」を脱着しています。activeクラスはcss設定で以下の様に記述されているので、スライドが開始される(onBefore)と背景色がピンクになり、スライドが停止すると(onAfter)もとに戻ります。.active{background-color:#fdd;}次回はスマートフォン用のコンテンツ作成にも利用できるswipeプロパティなどについても説明したいと思います。