skuare.net

スマホでも画像ギャラリー的なことやりたいですよね。
jQueryプラグインのTouchSlider -- JavaScript slide contentを利用するとスマホでスワイプ形式のスライドギャラリーを導入することができます。
もちろんPCでも動作しますので、レスポンシブ・ウェブデザインにも良いかもしれません。

使用方法 TouchSlider -- JavaScript slide contentからファイル一式をダウンロード。
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.touchslider.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$(".class名").touchSlider({
duration: 350, // スライドスピード
delay: 3000, // スクロールスピード
margin: 5, // 枠線
mouseTouch: true, //マウスタッチイベントを有効にするか
autoplay: false //自動再生
});
});
</script>
あとは下記のようにコンテンツ部分を記述します。
<div class="class名">
<div class="touchslider-viewport" style="width:400px;height:400px;overflow:hidden"><div>
<div class="touchslider-item">
<amp-img src="画像1パス">
</div>
<div class="touchslider-item">
<amp-img src="画像2パス">
</div>
<div class="touchslider-item">
<amp-img src="画像3パス">
</div>
</div></div>
</div>
※画像じゃなくても可能です。

スマホでスワイプ形式の画像ギャラリーを利用できるjQueryプラグイン「TouchSlider JavaScript touch control slider」サンプル