Roller

ダウンロード

1.2.1 1.2.0 1.1.2 1.1.1 1.1.0 1.0.0

埋め込み

常に最新

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/roller.min.js" ></script>

1.2.1

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/roller.1.2.1.min.js" ></script>

1.2.0

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/roller.1.2.0.min.js" ></script>

1.1.2

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/roller.1.1.2.min.js" ></script>

1.1.1

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/roller.1.1.1.min.js" ></script>

1.1.0

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/roller.1.1.0.min.js" ></script>

1.0.0

<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/roller.1.0.0.min.js" ></script>

必要なライブラリ

jQuery

ライブラリ内でのjQueryの利用範囲
  • DOM要素の取得
  • 属性の設定
  • スタイルの設定
  • イベントハンドラの登録

概要

Rollerは横並びになった画像などの要素をスワイプやドラッグ操作で横移動させて見せるコンポーネントです。

viewとcontainerで構成され、containerの内部要素が横並びになり、かつ開始と終了がつながって表示されるので無限に回転して要素を見せる事ができます。内部要素は自動的にdisplay:block, float:leftが設定されます。

投げるような動作をしたときの動きを細かく指定することができます。

止まったときや左端の要素の入れ替えが発生したときにそれぞれのイベントハンドラを登録することができます。

Roller内部のスワイプ処理ではpreventDefaultを呼び出してのデフォルトイベントキャンセルはあえて行っていません。必要に応じて個別に設定するようにしてください。

初期状態の高速回転するモードやスワイプ操作はAndroidの一部の機種や古い端末だとtouchmoveイベントの発生間隔の問題から思ったような動きは再現できません。十分にテストをし、場合によってアニメーションレートの変更やボタン操作への変更を検討することをお勧めします。

1.2.1
  • deprecate対応
1.2.0
  • ライブラリが自動で登録したイベントハンドラを削除する関数を追加しました。
1.1.2
  • コンテナの子要素が一つでもエラーとならないように修正しました。
1.1.1
  • 各コールバック関数内からthis指定でrollerオブジェクトを取得することができます。
1.1.0
  • 要素をコンテナの移動に伴って入れ替えする機能のオン／オフをコントロールする[rotation]を追加しました。

サンプル

ドラムロール

<--画像パスは書き換えてください-->
<div id="samp1v" class="view" >
	<div id="samp1c" class="container">
		<img src="img/roller/ig01.png" tag="01" />
		<img src="img/roller/ig02.png" tag="02" />
		<img src="img/roller/ig03.png" tag="03" />
		<img src="img/roller/ig04.png" tag="04" />
		<img src="img/roller/ig05.png" tag="05" />
		<img src="img/roller/ig06.png" tag="06" />
		<img src="img/roller/ig07.png" tag="07" />
		<img src="img/roller/ig08.png" tag="08" />
		<img src="img/roller/ig09.png" tag="09" />
		<img src="img/roller/ig10.png" tag="10" />
	</div>
	<div id="console1" class="console" ></div>
</div>
<div id="stat1" class="stat"></div>

.console{
	position: absolute;
	background-color: rgba(0,0,0,0.8);
	color: #FFFFFF;
	width: 150px;
	height: 40px;
	padding: 12px 0 0 5px;
	left: 75px;
	top: 30px;
	box-shadow 0 0 1px 1px #BBBBBB;
	font-size: 20px;
	text-align: center;
	display: none;
	z-index: 5;

	-webkit-border-radius : 12px;
	-moz-border-radius : 12px;
	-o-border-radius : 12px;
	-ms-border-radius : 12px;
	border-radius : 12px;
}
.view{
	float: left;
	width: 300px;
	height: 100px;
	margin: 10px 0 10px 0;
	border: solid 1px #000000;
	background-color: #FFFFFF;

	-webkit-border-radius : 6px;
	-moz-border-radius : 6px;
	-o-border-radius : 6px;
	-ms-border-radius : 6px;
	border-radius : 6px;
}
.stat{
	float: left;
	width: 278px;
	margin: 10px 0 0 20px;
}
.container{
	padding: 10px 0 10px 0;
}
.container img{
	margin: 0 50px 0 50px;
	width: 80px;
	height: 80px;
}

//以下をscriptのjqueryロード後の処理に記述します
var samp1 = new Roller({
	id: 'samp1v',
	cntid: 'samp1c',
	displacement: 60,
	autoadjustheight: false,
	autoadjustwidth: false,
	framerate: 60});
samp1.setWidth(true);
samp1.setOnSkip(function(inertia, fchild, containerx){
	$('#stat1').html(fchild.attr('tag'));
});
samp1.setOnStop(function(disp, just){
	$('#stat1').html(disp.attr('tag')+' stopped. just position is '+just);
});
$('#samp1v .container').on('mousemove', function(evt){
	//ドラッグ時の範囲選択を抑制
	evt.preventDefault();
});
$('#samp1v .container > img').on('mousedown', function(evt){
	//画像ドラッグ時で保存する機能を抑制
	evt.preventDefault();
});
$('#samp1v .container > img').on('touchstart', function(evt){
	//タッチデバイスのclick時に出るカーソルが出なくなるようにclickイベントを出させないため
	evt.preventDefault();
});
$('#samp1v .container > img').on('mouseup', function(evt){
	//click動作をエミュレート（マウス）
	if(!samp1.moved)dispMessage($('#console1'), $(this).attr('tag'), 1000, 500);
});
$('#samp1v .container > img').on('touchend', function(evt){
	//click動作をエミュレート（タッチ）
	if(!samp1.moved)dispMessage($('#console1'), $(this).attr('tag'), 1000, 500);
});

//以下の関数をscriptタグ内に記述します
function dispMessage(tgt, msg, duration, spd){
	tgt.html(msg);
	tgt.fadeIn(100, function(){
		setTimeout(function(){
			tgt.fadeOut(spd);
		}, duration);
	});
}

一つずつ見せるカルーセル

<--画像パスは書き換えてください-->
<div id="samp2v" class="view">
	<div id="samp2c" class="container">
		<img src="img/roller/ig01.png" tag="01" />
		<img src="img/roller/ig02.png" tag="02" />
		<img src="img/roller/ig03.png" tag="03" />
		<img src="img/roller/ig04.png" tag="04" />
		<img src="img/roller/ig05.png" tag="05" />
		<img src="img/roller/ig06.png" tag="06" />
		<img src="img/roller/ig07.png" tag="07" />
		<img src="img/roller/ig08.png" tag="08" />
		<img src="img/roller/ig09.png" tag="09" />
		<img src="img/roller/ig10.png" tag="10" />
	</div>
	<div id="console2" class="console" ></div>
	<nav id="tol2" class="tol" ><img src="img/toleft.png"/></nav>
	<nav id="tor2" class="tor" ><img src="img/toright.png"/></nav>
</div>
<div id="stat2" class="stat"></div>

.console{
	position: absolute;
	background-color: rgba(0,0,0,0.8);
	color: #FFFFFF;
	width: 150px;
	height: 40px;
	padding: 12px 0 0 5px;
	left: 75px;
	top: 30px;
	box-shadow 0 0 1px 1px #BBBBBB;
	font-size: 20px;
	text-align: center;
	display: none;
	z-index: 5;

	-webkit-border-radius : 12px;
	-moz-border-radius : 12px;
	-o-border-radius : 12px;
	-ms-border-radius : 12px;
	border-radius : 12px;
}
.view{
	float: left;
	width: 300px;
	height: 100px;
	margin: 10px 0 10px 0;
	border: solid 1px #000000;
	background-color: #FFFFFF;

	-webkit-border-radius : 6px;
	-moz-border-radius : 6px;
	-o-border-radius : 6px;
	-ms-border-radius : 6px;
	border-radius : 6px;
}
.stat{
	float: left;
	width: 278px;
	margin: 10px 0 0 20px;
}
.container{
	padding: 10px 0 10px 0;
}
.container img{
	margin: 0 50px 0 50px;
	width: 80px;
	height: 80px;
}
.tol{
	position: absolute;
	bottom: 5px;
	left: 25px;
}
.tor{
	position: absolute;
	bottom: 5px;
	right: 25px;
}

//以下をscriptのjqueryロード後の処理に記述します
var samp2 = new Roller({id: 'samp2v',
	cntid: 'samp2c',
	freetime: 0,
	displacement: 60,
	autoadjustheight: false,
	autoadjustwidth: false,
	framerate: 60});
samp2.setWidth(true);
samp2.setOnSkip(function(inertia, fchild, containerx){
	$('#stat2').html(fchild.attr('tag'));
	if(inertia){
		samp2.stopAnimation();
	}
});
samp2.setOnStop(function(disp, just){
	$('#samp2c').animate({left: just}, {duration: 200});
	$('#stat2').html(disp.attr('tag')+' stopped. just position is '+just);
});
$('#samp2v .container').on('mousemove', function(evt){
	//ドラッグ時の範囲選択を抑制
	evt.preventDefault();
});
$('#samp2v .container').on('mousedown', function(evt){
	//画像ドラッグ時で保存する機能を抑制
	evt.preventDefault();
});
$('#samp2v .container > img').on('mouseup', function(evt){
	//click動作をエミュレート（マウス）
	if(!samp2.moved)dispMessage($('#console2'), $(this).attr('tag'), 1000, 500);
});
$('#samp2v .container > img').on('touchstart', function(evt){
	//タッチデバイスのclick時に出るカーソルが出なくなるようにclickイベントを出させないため
	evt.preventDefault();
});
$('#samp2v .container > img').on('touchend', function(evt){
	//click動作をエミュレート（タッチ）
	if(!samp2.moved)dispMessage($('#console2'), $(this).attr('tag'), 1000, 500);
});
$('#tol2').on('click', function(evt){
	samp2.goLeft(1, 200);
});
$('#tor2').on('click', function(evt){
	samp2.goRight(1, 200);
});

//以下の関数をscriptタグ内に記述します
function dispMessage(tgt, msg, duration, spd){
	tgt.html(msg);
	tgt.fadeIn(100, function(){
		setTimeout(function(){
			tgt.fadeOut(spd);
		}, duration);
	});
}

３個表示カルーセル

<--画像パスは書き換えてください-->
<div id="samp3v" class="view" >
	<div id="samp3c" class="container3">
		<img src="img/roller/ig01.png" tag="01" />
		<img src="img/roller/ig02.png" tag="02" />
		<img src="img/roller/ig03.png" tag="03" />
		<img src="img/roller/ig04.png" tag="04" />
		<img src="img/roller/ig05.png" tag="05" />
		<img src="img/roller/ig06.png" tag="06" />
		<img src="img/roller/ig07.png" tag="07" />
		<img src="img/roller/ig08.png" tag="08" />
		<img src="img/roller/ig09.png" tag="09" />
		<img src="img/roller/ig10.png" tag="10" />
	</div>
	<div id="console3" class="console" ></div>
	<nav id="tol3" class="tol" ><img src="img/toleft.png"/></nav>
	<nav id="tor3" class="tor" ><img src="img/toright.png"/></nav>
</div>
<div id="stat3" class="stat"></div>

.console{
	position: absolute;
	background-color: rgba(0,0,0,0.8);
	color: #FFFFFF;
	width: 150px;
	height: 40px;
	padding: 12px 0 0 5px;
	left: 75px;
	top: 30px;
	box-shadow 0 0 1px 1px #BBBBBB;
	font-size: 20px;
	text-align: center;
	display: none;
	z-index: 5;

	-webkit-border-radius : 12px;
	-moz-border-radius : 12px;
	-o-border-radius : 12px;
	-ms-border-radius : 12px;
	border-radius : 12px;
}
.view{
	float: left;
	width: 300px;
	height: 100px;
	margin: 10px 0 10px 0;
	border: solid 1px #000000;
	background-color: #FFFFFF;

	-webkit-border-radius : 6px;
	-moz-border-radius : 6px;
	-o-border-radius : 6px;
	-ms-border-radius : 6px;
	border-radius : 6px;
}
.stat{
	float: left;
	width: 278px;
	margin: 10px 0 0 20px;
}
.container3{
	padding: 10px 0 10px 0;
}
.container3 img{
	margin: 0 10px 0 10px;
	width: 80px;
	height: 80px;
}
.tol{
	position: absolute;
	bottom: 5px;
	left: 25px;
}
.tor{
	position: absolute;
	bottom: 5px;
	right: 25px;
}

//以下をscriptのjqueryロード後の処理に記述します
var samp3 = new Roller({
	id: 'samp3v',
	cntid: 'samp3c',
	freetime: 0,
	autoadjustheight: false,
	autoadjustwidth: false,
	framerate: 60});
samp3.setOnSkip(function(inertia, fchild, containerx){
	var tg = fchild.attr('tag');
	$('#stat3').html(tg);
	samp3cnt++;
	if(samp3cnt>=3){
		if(inertia)samp3.stopAnimation();
		samp3cnt = 0;
	}
});
samp3.setOnStop(function(disp, just){
	$('#samp3c').animate({left: just}, {duration: 200});
	samp3cnt = 0;
	$('#stat3').html(disp.attr('tag')+' stopped. just position is '+just);
});
$('#samp3v .container3').on('mousemove', function(evt){
	//ドラッグ時の範囲選択を抑制
	evt.preventDefault();
});
$('#samp3v .container3').on('mousedown', function(evt){
	//画像ドラッグ時で保存する機能を抑制
	evt.preventDefault();
});
$('#samp3v .container3 > img').on('mouseup', function(evt){
	//click動作をエミュレート（マウス）
	if(!samp3.moved)dispMessage($('#console3'), $(this).attr('tag'), 1000, 500);
});
$('#samp3v .container3 > img').on('touchstart', function(evt){
	//タッチデバイスのclick時に出るカーソルが出なくなるようにclickイベントを出させないため
	evt.preventDefault();
});
$('#samp3v .container3 > img').on('touchend', function(evt){
	//click動作をエミュレート（タッチ）
	if(!samp3.moved)dispMessage($('#console3'), $(this).attr('tag'), 1000, 500);
});
$('#tol3').on('click', function(evt){
	samp3.goLeft(3, 300);
});
$('#tor3').on('click', function(evt){
	samp3.goRight(3, 300);
});
samp3.setWidth();

//以下の関数をscriptタグ内に記述します
function dispMessage(tgt, msg, duration, spd){
	tgt.html(msg);
	tgt.fadeIn(100, function(){
		setTimeout(function(){
			tgt.fadeOut(spd);
		}, duration);
	});
}

３連カルーセル

<--画像パスは書き換えてください-->
<div id="samp4v" class="view" >
	<div id="samp4c" class="container4">
		<div class="block no1" tag="block01">
		<img src="img/roller/ig01.png" tag="01" />
		<img src="img/roller/ig02.png" tag="02" />
		<img src="img/roller/ig03.png" tag="03" />
		</div>
		<div class="block no2" tag="block02">
		<img src="img/roller/ig04.png" tag="04" />
		<img src="img/roller/ig05.png" tag="05" />
		<img src="img/roller/ig06.png" tag="06" />
		</div>
		<div class="block no3" tag="block03">
		<img src="img/roller/ig07.png" tag="07" />
		<img src="img/roller/ig08.png" tag="08" />
		<img src="img/roller/ig09.png" tag="09" />
		</div>
		<div class="block no4" tag="block04">
		<img src="img/roller/ig10.png" tag="10" />
		</div>
	</div>
	<div id="console4" class="console" ></div>
	<nav id="tol4" class="tol" ><img src="img/toleft.png"/></nav>
	<nav id="tor4" class="tor" ><img src="img/toright.png"/></nav>
	<div class="viewpoints">
		<div id="vp41"></div>
		<div id="vp42"></div>
		<div id="vp43"></div>
		<div id="vp44"></div>
	</div>
</div>
<div id="stat4" class="stat"></div>

.console{
	position: absolute;
	background-color: rgba(0,0,0,0.8);
	color: #FFFFFF;
	width: 150px;
	height: 40px;
	padding: 12px 0 0 5px;
	left: 75px;
	top: 30px;
	box-shadow 0 0 1px 1px #BBBBBB;
	font-size: 20px;
	text-align: center;
	display: none;
	z-index: 5;

	-webkit-border-radius : 12px;
	-moz-border-radius : 12px;
	-o-border-radius : 12px;
	-ms-border-radius : 12px;
	border-radius : 12px;
}
.view{
	float: left;
	width: 300px;
	height: 100px;
	margin: 10px 0 10px 0;
	border: solid 1px #000000;
	background-color: #FFFFFF;

	-webkit-border-radius : 6px;
	-moz-border-radius : 6px;
	-o-border-radius : 6px;
	-ms-border-radius : 6px;
	border-radius : 6px;
}
.stat{
	float: left;
	width: 278px;
	margin: 10px 0 0 20px;
}
.container4 img{
	margin: 0 10px 0 10px;
	display: block;
	float: left;
}
.view4{
	float: left;
	width: 310px;
	margin: 10px 0 10px 0;
	border: solid 1px #000000;
	background-color: #FFFFFF;

	-webkit-border-radius : 6px;
	-moz-border-radius : 6px;
	-o-border-radius : 6px;
	-ms-border-radius : 6px;
	border-radius : 6px;
}
.block{
	padding: 10px 0 10px 0;
	width: 300px;
}
.no1{
	background-color: #FFBBBB;
}
.no2{
	background-color: #BBFFBB;
}
.no3{
	background-color: #BBBBFF;
}
.no4{
	background-color: #FFFFAA;
}
.viewpoints{
	position: absolute;
	bottom: 3px;
	left: 75px;
}
.viewpoints div{
	float: left;
	width: 15px;
	height: 15px;
	margin: 0 10px 0 10px;
	-webkit-border-radius : 8px;
	-moz-border-radius : 8px;
	-o-border-radius : 8px;
	-ms-border-radius : 8px;
	border-radius : 8px;
	border: solid 1px #666666;
	background-color: #FFFFFF;
}
.tol{
	position: absolute;
	bottom: 5px;
	left: 25px;
}
.tor{
	position: absolute;
	bottom: 5px;
	right: 25px;
}

//以下をscriptのjqueryロード後の処理に記述します
var front4 = 1;
$('#vp41').css({backgroundColor: 'rgba(231,129,95,1)'});
var samp4 = new Roller({
	id: 'samp4v',
	cntid: 'samp4c',
	freetime: 0,
	autoadjustheight: false,
	autoadjustwidth: false,
	framerate: 60});
samp4.setOnSkip(function(inertia, fchild, containerx){
	var tg = fchild.attr('tag');
	$('#stat4').html(tg);
	if(inertia){
		samp4.stopAnimation();
	}
});
samp4.setOnStop(function(disp, just){
	$('#samp4c').animate({left: just}, {duration: 200});
	front4 = parseInt(disp.attr('tag').replace('block0', ''));
	$('.viewpoints div').css({backgroundColor: 'rgba(255,255,255,1)'});
	$('#vp4'+front4).css({backgroundColor: 'rgba(231,129,95,1)'});
	$('#stat4').html(disp.attr('tag')+' stopped. just position is '+just);
});
$('#samp4v .container4').on('mousemove', function(evt){
	//ドラッグ時の範囲選択を抑制
	evt.preventDefault();
});
$('#samp4v .container4').on('mousedown', function(evt){
	//画像ドラッグ時で保存する機能を抑制
	evt.preventDefault();
});
$('#samp4v .container4 img').on('mouseup', function(evt){
	//click動作をエミュレート（マウス）
	if(!samp4.moved)dispMessage($('#console4'), $(this).attr('tag'), 1000, 500);
});
$('#samp4v .container4 > img').on('touchstart', function(evt){
	//タッチデバイスのclick時に出るカーソルが出なくなるようにclickイベントを出させないため
	evt.preventDefault();
});
$('#samp4v .container4 > img').on('touchend', function(evt){
	//click動作をエミュレート（タッチ）
	if(!samp4.moved)dispMessage($('#console4'), $(this).attr('tag'), 1000, 500);
});
$('#tol4').on('click', function(evt){
	samp4.goLeft(1, 300);
});
$('#tor4').on('click', function(evt){
	samp4.goRight(1, 300);
});
var movevp = function(toidx){
	if(front4==4 && toidx==1){
		samp4.goLeft(1, 300);
	}
	else if(front4 > toidx){
		samp4.goRight(front4 - toidx, 300);
	}
	else if(front4 < toidx){
		samp4.goLeft(toidx - front4, 300);
	}
};
$('#vp41').on('touchstart', function(evt){
	movevp(1);
});
$('#vp41').on('mousedown', function(evt){
	movevp(1);
});
$('#vp42').on('touchstart', function(evt){
	movevp(2);
});
$('#vp42').on('mousedown', function(evt){
	movevp(2);
});
$('#vp43').on('touchstart', function(evt){
	movevp(3);
});
$('#vp43').on('mousedown', function(evt){
	movevp(3);
});
$('#vp44').on('touchstart', function(evt){
	movevp(4);
});
$('#vp44').on('mousedown', function(evt){
	movevp(4);
});
samp4.setWidth();

//以下の関数をscriptタグ内に記述します
function dispMessage(tgt, msg, duration, spd){
	tgt.html(msg);
	tgt.fadeIn(100, function(){
		setTimeout(function(){
			tgt.fadeOut(spd);
		}, duration);
	});
}

設定

未指定：必須条件：文字列
id
Rollerを構成する要素のうち、viewに設定する要素のid属性値を指定します。idのない要素をRollerのviewにすることはできません。
未指定：必須条件：文字列
cntid
Rollerを構成する要素のうち、containerに設定する要素のid属性値を指定します。idのない要素をRollerのcontainerにすることはできません。
未指定：0条件：0->top　1->translate3d
usetranslate
containerの位置指定に使用するスタイル要素を指定します。0はtopを使った絶対位置指定、1を指定するとtranslate3dを使った指定になります。translate3dを使うと一部の端末で動きが滑らかになりますが、Androidでフォーカスとのずれが生じてクリックやテキスト入力ができなくなる場合もありますので使用する際は注意してください。
未指定：40.0条件：px/秒^2単位の0以上の数値
friction
慣性動作時に１秒間あたりに減少させるスクロールスピードを指定します。
未指定：200条件：ミリ秒単位の0以上の数値
freetime
慣性動作時に指定したミリ秒間、減速されずにスクロールスピードが減速されません。
未指定：40条件：0より上の整数
framerate
１秒間にスクロール移動するコマ数を指定します。この設定はスワイプ中ではなく慣性動作（スワイプで投げるような動作）時に適用されます。
未指定：15条件：px単位の数値
rebounddistance
ここで指定したピクセル以上スワイプ・ドラッグすると、stopコールバック関数に渡される引数の「一番近いピッタリな境界線」が動かした方向の境界線になります。
未指定：0条件：px単位の数値
displacement
0を指定すると一番最初にコンテナ内に記述した要素の左端がビューの左端に合うように描画されます。ここにはそこからのずれを右を正として指定します。
未指定：2条件：0->全て　1->マウス　2->タッチ　9->なし
handlemode
回転させる方法を決定します。これが0の状態だとマウスとタッチ両方のイベントを拾って動作します。9に設定するとドラッグやスワイプで動かなくなります。
未指定：true条件：true|false
autotranslatemode
Rollerではusetranslateを1にしてもそのままではブラウザが「Android 3.x以下」「iPhone OS 4」「Opera」「IE」であった場合自動的に0に設定しなおします。autotranslatemodeをfalseに指定しておくとこの自動置き換え機能を抑制し、どのブラウザであってもtranslate3dで位置指定するようになります。ただし問題のある端末を抑制していますので、falseに設定する場合は十分に注意してください。
未指定：false条件：true|false
nothidden
この設定をtrueにすると、viewに自動的にoverflow: hidden設定をしなくなります。
未指定：true条件：true|false
autoadjustheight
この設定がtrueの場合、setWidh()を呼び出したときにviewの内側の高さを自動的にcontainerの外側の高さに設定します。
未指定：true条件：true|false
autoadjustwidth
この設定がtrueの場合、containerの子要素のloadイベントが発生するたびにsetWidth()を呼び出し、コンテナの幅とコンテナ位置の調整を行います。
未指定：true条件：true|false
autofloat
Rollerではcontainerをabsolute指定するため、横幅を指定する必要があります。この設定がtrueだと自動的に「width: 100%」を指定します。
未指定：true条件：true|false
rotation [v1.1.0 以上]
この設定をfalseにするとコンテナの移動に伴う子要素の入れ替えを行わなくなります。この設定を切り替えるとアニメーションロジックが全く別のものに切り替わります。
未指定：-条件：-
stopAnimation()
今動作しているアニメーションをキャンセルします。同時にstopイベントを発生します。
未指定：-条件：-
setOnSkip(function(inertia, fchild, containerx){})
引数にコールバック関数を指定することで、正面にある要素が変わったときの処理を記述することができます。ロジック的には初期表示でcontainerの子要素の先頭を返し、以降は先頭の子要素が最初にあった位置に来た要素を返します。引数はそれぞれinertia: 慣性動作中かどうか、fchild: 正面に来た要素、containerx: containerの現在のleft値
未指定：-条件：-
setOnStop(function(disp, just){})
引数にコールバック関数を指定することで、containerの移動が終わったときの処理を記述することができます。引数はそれぞれdisp: 正面に来た要素、just: dispが真正面に来るために移動すべき位置
未指定：-条件：-
setWidth(adjustleft)
containerの内部要素の幅を計算し、conntainerの幅を設定します。autoadjustheightがtrueなら同時にviewとcontainerの高さをcontainerに合わせ、adjustleftがtrueならcontainerの位置調整を行います。
未指定：-条件：-
moveTo(to, duration)
containerの位置を指定されたtoにdurationミリ秒で移動します。この関数は内部のロジックを考慮しているので、toに大きい値を指定しても問題ありません。
未指定：-条件：-
getToLeft(times)
指定したtimes個の要素分、左に移動するために必要な移動量をピクセル単位で返します。
未指定：-条件：-
getToRight(times)
指定したtimes個の要素分、右に移動するために必要な移動量をピクセル単位で返します。
未指定：-条件：-
goLeft(times, duration)
指定したtimes個の要素分、durationミリ秒かけて左に移動します。
未指定：-条件：-
goRight(times, duration)
指定したtimes個の要素分、durationミリ秒かけて右に移動します。
未指定：-条件：-
purgeEvents()[v1.2.0 以上]
自動で登録したイベントハンドラをすべて解除します。