スマホでスワイプ形式の画像ギャラリーを利用できるjQueryプラグイン「TouchSlider JavaScript touch control slider」
jQueryプラグインのTouchSlider -- JavaScript slide contentを利用するとスマホでスワイプ形式のスライドギャラリーを導入することができます。
もちろんPCでも動作しますので、レスポンシブ・ウェブデザインにも良いかもしれません。
sponsors
使用方法
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」サンプル
sponsors
「スマホでスワイプ形式の画像ギャラリーを利用できるjQueryプラグイン「TouchSlider JavaScript touch control slider」」をシェアする
記事作成:2013年2月27日 09:39
記事URL:http://www.skuare.net/2013/02/jquerytouchslider_javascript_t.html
TOP > javascript > 画像関連 > スマホでスワイプ形式の画像ギャラリーを利用できるjQueryプラグイン「TouchSlider JavaScript touch control slider」
前の記事:スマホで水平垂直方向へのスワイプ、スライドが可能なjQueryプラグイン「jQuery slideToucher plugin」
次の記事:スマホサイトでよく見る感じのサイドからにゅっと出てくるメニューをjQueryプラグイン「Sidr」で作る
あなたにはこちもお勧め!
jQuery プラグインまとめ!