1
2
3
4
5
6
7
8
9
特徴
- API形式でアニメーションが可能。
- API形式のため、スライドさせる矢印ボタンの設置、要素クリックによる動作等は各自自由に行える。
- 最小限のスタイル変更しか行わないので、作成済みのスタイルをそのまま適用可能。
- スライドさせる画像等の要素のサイズがそれぞれ異なっていても、要素が並んでいなくても適用可能。
- スライドを作成しても後からオプションを変更可能。
- Chrome、Firefox、IE7+等のブラウザ、スマートフォンで動作。
ドキュメント
使い方
以下のように記述し、jQueryとasliderを読み込んで特定の要素をスライド化します。
<script src="(jQuery本体のパス)"></script>
<script src="jquery.aslider.min.js"></script>
<script>
$(function() {
// #sliderに対してスライド化を実行
var aslider1 = $("#slider").aslider();
});
</script>
上記のコードの場合、HTMLは以下のようにブロック要素で囲みます。
<script src="jquery.aslider.min.js"></script>
<script>
$(function() {
// #sliderに対してスライド化を実行
var aslider1 = $("#slider").aslider();
});
</script>
<div id="slider">
<ul>
<li>1つ目の要素</li>
<li>2つ目の要素</li>
<li>3つ目の要素</li>
<li style="display: none;">隠し要素は無視されます</li>
<li>4つ目の要素</li>
<li>5つ目の要素</li>
</ul>
</div>
asliderで指定した要素の子がスライドされることに注意してください。これは他のスライダープラグインの指定方法と異なっている場合があります。asliderで指定した要素自身は枠の役割りをします。
<ul>
<li>1つ目の要素</li>
<li>2つ目の要素</li>
<li>3つ目の要素</li>
<li style="display: none;">隠し要素は無視されます</li>
<li>4つ目の要素</li>
<li>5つ目の要素</li>
</ul>
</div>
コンストラクター
aslider (object option): object
指定した要素をスライド化し、各メソッドが実行できるobjectを返します。引数optionに下記オプションを指定できます(各オプションはそれぞれ省略可)。
var aslider1 = $("#slider").aslider();
// 縦方向
var aslider2 = $("#slider").aslider({
vertical: true
});
var aslider2 = $("#slider").aslider({
vertical: true
});
一度に指定できる要素は1つまでです。
// 1つ目の要素に対してのみスライド化されます
// つまり、.slidersの2つ目以降の要素と#sliderは無視されます
var aslider = $(".sliders, #slider").aslider();
// それぞれの要素に対してスライド化させる場合は以下のようにします
var aslider1 = $(".sliders").eq(0).aslider();
var aslider2 = $(".sliders").eq(1).aslider();
var aslider3 = $("#slider").aslider();
メソッドチェーンではありませんのでご注意ください。
// つまり、.slidersの2つ目以降の要素と#sliderは無視されます
var aslider = $(".sliders, #slider").aslider();
// それぞれの要素に対してスライド化させる場合は以下のようにします
var aslider1 = $(".sliders").eq(0).aslider();
var aslider2 = $(".sliders").eq(1).aslider();
var aslider3 = $("#slider").aslider();
オプション
vertical: boolean (default=false)
アニメーションする方向が縦の場合、trueを指定します。
offset: object (default={left: 0.5, top: 0.5})
スライド枠のサイズを1として、要素の位置オフセットを指定します。0.5で中央となります。
elem_offset: object (default={left: -0.5, top: -0.5})
各要素のサイズを1として、要素の位置オフセットを指定します。0.5で中央となります。
move_minimum: boolean (default=false)
移動量を最小にするか指定します。trueにするとmoveメソッドの引数move_posに大きな値を指定してもループしません。
moveBefore: function (default=function () {})
アニメーション前に実行するコールバック関数を指定します。
moveStep: function (default=function (t) {})
アニメーション中の毎フレーム実行するコールバック関数を指定します。引数tはアニメーション進行度(0～1)が設定されます。
slideメソッドの場合は次の要素までの進行度となります。
moveAfter: function (default=function (succ) {})
アニメーション後に実行するコールバック関数を指定します。引数succは正常終了ならtrueが設定されます。
slideメソッドでは呼ばれません。
メソッド、プロパティ
option
上記オプションを参照できます。変更も可。
init ()
初期化を行い、表示を更新します。スライド枠のサイズ(asliderで指定した要素)のサイズが変更された場合等に実行するとよいでしょう。
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
要素の数を取得します。スライド枠が大きい等の理由でスライド化していない場合は0が返ります。
getPos (integer offset) : object
現在の位置情報を返します。index: 要素インデックス
point: 次の要素までの進行度(0～1未満)
over: 内部で使用します。通常は用いません
引数offsetを指定すると現在位置から引数offsetだけ動かした分のインデックスを返します。
制限等
- スライドしなくてもすべての要素が表示されているほどスライド枠が大きい場合はスライド化されず、オプションのoffsetとelem_offsetのみ適用されます。
- スライド枠が大きくてもスライド化させたい場合は、同じ要素を複数記述する等、スライド枠より大きくなるよう十分な数の要素を用意する必要があります。
- 要素に画像を含み、幅や高さが未指定の場合はwindow.onload等、画像の読み込み後に実行する必要があります。
- 要素の位置指定が絶対指定、または相対指定でも位置を大きな値にすると正しく動作しない場合があります。