特徴
- API形式でアニメーションが可能。
- API形式のため、矢印ボタンの設置や要素クリックによる動作等は各自自由に行える。
- 最小限のスタイル変更しか行わないので、作成済みのスタイルをそのまま適用可能。
- 各要素はスタイルシートで設定した位置をそのまま利用可能。
- Chrome、Firefox、IE6+等のブラウザ、スマートフォンで動作。
ドキュメント
使い方
以下のように記述し、jQueryとacarouselを読み込んで特定の要素をスライド化します。
<script src="(jQuery本体のパス)"></script>
<script src="jquery.acarousel.min.js"></script>
<script>
$(function() {
// #carouselに対してカルーセル化を実行
var acarousel1 = $("#carousel").acarousel();
});
</script>
上記のコードの場合、HTMLは以下のようにブロック要素で囲みます。
<script src="jquery.acarousel.min.js"></script>
<script>
$(function() {
// #carouselに対してカルーセル化を実行
var acarousel1 = $("#carousel").acarousel();
});
</script>
<ul id="carousel">
<li>1つ目の要素</li>
<li>2つ目の要素</li>
<li>3つ目の要素</li>
<li>4つ目の要素</li>
<li>5つ目の要素</li>
</ul>
メソッドチェーンではありませんのでご注意ください。
<li>1つ目の要素</li>
<li>2つ目の要素</li>
<li>3つ目の要素</li>
<li>4つ目の要素</li>
<li>5つ目の要素</li>
</ul>
コンストラクター
acarousel (object option): object
指定した要素をカルーセル化し、各メソッドが実行できるobjectを返します。引数optionに下記オプションを指定できます(各オプションはそれぞれ省略可)。
var acarousel1 = $("#carousel").acarousel();
一度に指定できる要素は1つまでです。
// 1つ目の要素に対してのみカルーセル化されます
// つまり、.carouselsの2つ目以降の要素と#carouselは無視されます
var acarousel = $(".carousels, #carousel").acarousel();
// それぞれの要素に対してカルーセル化させる場合は以下のようにします
var acarousel1 = $(".carousels").eq(0).acarousel();
var acarousel2 = $(".carousels").eq(1).acarousel();
var acarousel3 = $("#carousel").acarousel();
// つまり、.carouselsの2つ目以降の要素と#carouselは無視されます
var acarousel = $(".carousels, #carousel").acarousel();
// それぞれの要素に対してカルーセル化させる場合は以下のようにします
var acarousel1 = $(".carousels").eq(0).acarousel();
var acarousel2 = $(".carousels").eq(1).acarousel();
var acarousel3 = $("#carousel").acarousel();
オプション
move_minimum: boolean (default=false)
移動量を最小にするか指定します。trueにするとmoveメソッドの引数move_posに大きな値を指定してもループしません。
moveBefore: function (default=function () {})
アニメーション前に実行するコールバック関数を指定します。
moveStep: function (default=function (elem, index, pos_index, t) {})
アニメーション中の毎フレーム実行するコールバック関数を指定します。実行される回数は(毎フレーム)×(カルーセル化した要素数)となります。コンストラクター時にもカルーセル化した要素分実行されますのでご注意ください。
引数elemはアニメーションするjQuery Objectが設定されます。
引数indexはアニメーションする要素のインデックスが設定されます。
引数pos_indexはアニメーションする要素の現在位置が設定されます。
引数tはアニメーションする要素の現在位置からの進行度(0～1)が設定されます。
moveAfter: function (default=function () {})
アニメーション後に実行するコールバック関数を指定します。slideメソッドでは呼ばれません。
メソッド、プロパティ
option
上記オプションを参照できます。変更も可。
init ()
初期化を行い、表示を更新します。要素の数が変更された場合等に実行するとよいでしょう。
move (float move_pos, mixed duration, string easing) : float
アニメーションを実行し、移動数を返します。小数点含めて指定できます。例えば1.5と指定すると1.5個分動きます。引数move_posに移動する数を指定します。負の値も指定できます。
引数duration、easingはjQueryと同様の方法で指定できます。
既にアニメーション中の場合、そのアニメーションを停止させてから実行します。
moveByIndex (integer index, mixed duration, string easing) : float
アニメーションを実行し、移動数を返します。動かす数は引数indexで指定した要素インデックスにより決定されます。
内部ではmoveメソッドが呼ばれます。
moveByElem (object elem, mixed duration, string easing) : float
アニメーションを実行し、移動数を返します。動かす数は引数elemで指定した要素により決定されます。引数elemはカルーセル化した要素である必要があります。
内部ではmoveメソッドが呼ばれます。
slide (integer duration)
常時動くタイプのスライドアニメーションを実行します。要素1つ分の移動量を引数durationで指定します。負の値も指定できます。
既にアニメーション中の場合、そのアニメーションを停止させてから実行します。
stop ()
アニメーションを停止します。
isAnim () : boolean
アニメーション中ならtrueを、停止状態ならfalseを返します。count () : integer
要素の数を取得します。
getPos (integer offset) : object
現在の位置情報を返します。index: 要素インデックス
point: 次の要素までの進行度(0～1未満)
引数offsetを指定すると現在位置から引数offsetだけ動かした分のインデックスを返します。
制限等
- 原則、各要素のサイズや絶対指定で位置を設定をしておく必要があります。
- 別のプラグイン等で外部から要素を操作すると正しく動作しない場合があります。