タッチデバイスのフリック入力にも対応したシンプルなスライドショーを実装できる jQuery プラグイン[Swipeshow]を紹介します。
このプラグインは jQuery 1.8 以上に対応。容量も軽く、サクサク動きます。
まずは Swipeshow 本体のダウンロード。以下のサイトよりどうぞ。
HTMLのマークアップはもちろん、以下のように最小限度の記述で済みます。
<div class="swipeshow"> <ul class="slides"> <li class="slide"> <img src="sample-01.png" /> </il> <li class="slide"> <img src="sample-02.png" /> </li> <li class="slide"> <img src="sample-03.png" /> </li> </ul> <div class='dots'></div> </div>
続いて、CSSでスライドショーのサイズを指定しておきます。
.swipeshow { width: 640px; height: 300px; }
ダウンロードしたプラグインファイル一式を読み込みます。このとき、jQuery 本体も読み込んでおくことを忘れずに。
<link rel='stylesheet' href='jquery.swipeshow.css'> <script src='jquery.js'></script> <script src='jquery.swipeshow.js'></script>
最後に Swipeshow を設定するための記述を。
$(function() { $(".swipeshow").swipeshow(); });
また、幾つかのオプションも用意されており、自動スタートやインターバル、アニメーションスピードなどを設定することができます。
$(".swipeshow").swipeshow({ autostart: true, // 自動スタートするか否か。する場合はtrue、しない場合はfalse interval: 3000, // スライド切替のインターバル initial: 0, // スライドインデックス speed: 700, // アニメーションスピード friction: 0.3, // バウンスバック動作 mouse: true // マウスのドラッグでの操作を有効にするかどうか });
以上。簡単に実装できるので嬉しい仕様ですよね。
容量も軽いのでモバイルサイトなどにも最適です。
下記サイトに実際の動作のサンプルを用意しましたので、こちらも合わせてご覧ください。
Swipeshow:サンプル・デモ