JQueryで動くフリック・スワイプのサンプルを作りました。

　JQerryで動くフリック・スワイプのサンプルを作りました。使い方は、画像をスライドさせるとスライドした方向に一つ移動します。小さい画像をクリックすると、対応した画像がスライドして表示されます。「最初」「最後」をクリックすると最初、最後の画像まで自動的スライドします。

　動作環境は、IE6以上、FireFox、Safari、iphone、ipad、Androidで動きます。今回はCSS３を使っていないので、その他のブラウザでも動くと思います。
最新版はこちらになります。

リック・スワイプのサンプル
リック・スワイプのサンプル（Jquery版）

iphone、ipad、Androidで確認される方は、下記のQRコード使って下さい。

変更するにあったって

1.　画像を変更変更する
　index.htmlの「#MainView_Area」の「li」部分に追加してください。画像の幅（間隔）は、「css/index.css」の「#SubOperat_Area li」の「widht」を変更してください。

2.　サブ画像とボタンについて
　サブ画像とボタンを必要でない場合は、「html」の表示部分削除してください。

3.　デザインを変更する
デザインを変更するには、「index.html」「index.css」を修正してください。javascriptファイルを変更する必要はありません。

4. iphone,androidで使う場合　
　metaタグの「viewport」の設定があった方が、使いやすいです。無くても動きますが、注意してください。

5.　Javaseriptの設定変更をするには
　「js/java.js」ファイルの下記の部分を変更してください
//easingの種類については、下記のサイトを参考にしてください
// http://semooh.jp/jquery/cont/doc/easing/
var easing_speed = “swing”;

//CSS
var MainId = “#MainView_Area”;
var SubId = “#SubOperat_Area”;

//画像の初期位置
//center、leftを指定
var img_position = “center”;

//画像移動時間
var Timer = 500;

　ソースコードは、以下のようになっています。もし良かったらダウンロードしてください。
tar形式でダウンロード
 zip形式でダウンロード

（反省　）
今回は、JQueryの「draggable」が、iphoneで使えないことを知らなくて苦戦しました。タッチパネルのOSは、「touchstart」を使うとできました。iphone、Androidでウインドウを変更した時に画像が中央にくるようにするのが面倒くさかった。