スマホ用のスワイプギャラリーjQueryプラグイン「jquery.swipeGallery」

スマホで利用できるスワイプ可能なスライドギャラリー用のjQueryプラグイン「jquery.swipeGallery」を公開しました。指で画面をスワイプすると画像が切り替わるアレです。

ダウンロード / サンプル(スマホで見てね) / GitHub

スワイプ系のギャラリーとしては珍しい無限ループに対応しているプラグインです。

利用方法

jQueryを読み込みその後にjquery.swipeGalleryを読み込みます。

<script src="jquery.js"></script>
<script src="jquery.swipeGallery.js"></script>

CSSファイルも読み込みます。

<link rel="stylesheet" href="jquery.swipeGallery.css">

HTMLは以下のようにマークアップします。.swipeGallery_XXXはプラグイン側で利用しているclass名ですがオプションで任意のclass名に変更することも可能です。.swipeGalleryはプラグイン側では利用していませんがCSSで利用しているので変更時にはCSSの内容も変更してください。

<div id="適当なID" class="swipeGallery">
	<div class="swipeGallery_viewport">
		<div class="swipeGallery_inner">
			<ul>
				<li class="swipeGallery_slide"><a href="http://blog.webcreativepark.net/"><img src="./img/photo1.jpg"></a></li>
				<li class="swipeGallery_slide"><a href="http://blog.webcreativepark.net/"><img src="./img/photo2.jpg"></a></li>
				<li class="swipeGallery_slide"><a href="http://blog.webcreativepark.net/"><img src="./img/photo3.jpg"></a></li>
				<li class="swipeGallery_slide"><a href="http://blog.webcreativepark.net/"><img src="./img/photo4.jpg"></a></li>
			</ul>
		</div>
	</div>
	<ul class="swipeGallery_paging"></ul>
</div>

以下のスクリプトでスワイプギャラリーを実行することができます。

$(window).load(function(){
	$("#適当なID").swipeGallery();
});

nextボタンやprevボタンはデフォルトではoffになっています。

利用する際には.swipeGallery内に以下のようなHTMLを追加し、

<a href="#" class="swipeGallery_prev">prev</a>
<a href="#" class="swipeGallery_next">next</a>

オプションでnextとprevをセレクターで指定してください。

$(window).load(function(){
	$("#適当なID").swipeGallery({
		next:".swipeGallery_next",
		prev:".swipeGallery_prev"
	});
});

利用できるオプション

オプション 説明 初期値
viewport viewportのセレクタ .swipeGallery_viewport
inner innerのセレクタ .swipeGallery_inner
slide slideのセレクタ .swipeGallery_slide
paging pagingのセレクタ .swipeGallery_paging
paging_class ページングがアクティブの際に利用されるclass current
next 次へボタンのセレクタ false
prev 前へボタンのセレクタ false

関連エントリー

スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」
レスポンシブWebデザインに対応した「jquery.heightLine.js」
スクロールストップイベントを実装するjQueryプラグイン「jquery.scrollstop.js」
PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」

スポンサードリンク

«スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」 | メイン | gulp.spritesmithを便利にカスタマイズ»