jquery.touchslider.js：タッチスライド（スワイプ）で複数画像を左右にスライド

複数画像をスマホやタブレットの様にタッチ（スワイプ）で左右にスライドさせてみます。

1．CSSの記述例

以下は任意です。

<style type="text/css" media="all">
<!--
.touchslider-viewport{
	width:300px;
	height:300px;
	overflow:hidden;
	margin:0 auto;
}
.touchslider-nav-item{
	padding:7px;
	border:solid 1px #000000;
	cursor:pointer;
}
.touchslider-prev,
.touchslider-next{
	cursor:pointer;
}
-->
</style>

2．読込むJsファイルとJavaScriptの記述例

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.touchslider.js"></script>
<script type="text/javascript">
$("document").ready(function(){
    $(".clSlider").touchSlider({
        duration: 350,	// スライドスピード
        delay: 3000,	// スクロールスピード
        margin: 5,	// 枠線
		namespace: "touchslider",
		next: ".touchslider-next",
		pagination: ".touchslider-nav-item",
		currentClass: "touchslider-nav-item-current",
		prev: ".touchslider-prev",
        mouseTouch: true,	//マウスタッチイベントを有効
        autoplay: false	//自動再生
    });
});
</script>

3．HTMLの記述例

<div class="clSlider">


<div class="touchslider-viewport">


<div>


<div class="touchslider-item">
            <img src="i1.jpg" width="300" height="300"></div>




<div class="touchslider-item">
            <img src="i2.jpg" width="300" height="300"></div>




<div class="touchslider-item">
            <img src="i3.jpg" width="300" height="300"></div>




<div class="touchslider-item">
            <img src="i4.jpg" width="300" height="300"></div>




<div class="touchslider-item">
            <img src="i5.jpg" width="300" height="300"></div>


</div>


</div>




<div align="center">
        <span class="touchslider-prev">←</span>
<span class="touchslider-nav-item touchslider-nav-item-current">1</span>
<span class="touchslider-nav-item">2</span>
<span class="touchslider-nav-item">3</span>
<span class="touchslider-nav-item">4</span>
<span class="touchslider-nav-item">5</span>
<span class="touchslider-next">→</span></div>


</div>



<!--/clSlider-->

jquery.touchslider.js：タッチスライド（スワイプ）で複数画像を左右にスライドするデモ

ソース元：TouchSlider – JavaScript slide content