jquery.flick

iPhone,Android,PCで使えるフリック操作が実現できるjQuery Plugin

仕様

1. IEに対応（IE6〜）
2. フリックエリア クリック時、フリックした場合には「縦方向のスクロールストップ」。
3. 普通に縦方向にスクロールした場合には「フリックの操作をストップ」する。
4. フリックした時、フリックエリアの頭までスクロールする。
5. 初回の「フリックコンテンツの位置」を指定する。
6. アドレスに「フリックコンテンツ位置のID（ハッシュ）」を指定することにで、そのコンテンツへ移動する。
7. タイマーで時間が来ると次のコンテンツへ移動する。

使い方

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.flick.js"></script> <script type="text/javascript"> 	$("#flick").flick(); </script> 

オプション

• contentNum : 0 スタートが何番目から始まるか
• centerPosition : true or false フリック操作をした時にコンテンツの位置までスクロールするか
• speed: 200 フリック操作を話した時のスピード（pcの場合） transitionが使えるブラウザの場合には cssで指定した値が有効（transition: transform .2s ease-out;）
• timer: false コンテンツをタイマーで回すか（回す場合は時間を指定、回さない場合はfalse）

初期設定

contentNum: 0, centerPosition: true, speed: 200, timer: false 

必須なCSS

div.container { 	overflow: hidden; } div.itemBox { 	position: relative; } div.container .item { 	float: left; } .moving { 	-webkit-transition: -webkit-transform .2s ease-out; 	-moz-transition: -moz-transform .2s ease-out; 	-o-transition: -o-transform .2s ease-out; 	-ms-transition: -ms-transform .2s ease-out; } 

付与するclass

• セレクトされているflickNavのクラスは「selected」
• 「next」「prev」の次or前のコンテンツがない場合のクラスは「end」

補足

• IE6で使用する場合は、「container」に幅をいれるようにしてください。
• PCサイトで使う場合で、コンテンツの中にimgが入ってる場合には、フリック時に画像をドラックしてしまいます。imgに「pointer-events: none;」 を入れるとドラックされないようになります。

ライセンス

• Copyright 2012 © kamem
• http://www.opensource.org/licenses/mit-license.php