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

jquery.touchslider.jsを使って、複数画像をスマホやタブレット操作の様にタッチスライド（スワイプ）で左右にスライドさせる方法をご紹介します。

Contents

タッチスライド（スワイプ）エリアのCSSの記述
jquery.touchslider.jsを使ったJavaScriptの記述
タッチスライド（スワイプ）エリアのHTMLの記述
jquery.touchslider.js：タッチスライド（スワイプ）で複数画像を左右にスライドするデモページ

タッチスライド（スワイプ）エリアのCSSの記述

※にタッチスライド（スワイプ）エリア.touchslider-viewportのサイズを指定します。必要に応じて変更して下さい。

<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>

jquery.touchslider.jsを使ったJavaScriptの記述

※jqueryとjquery.touchslider.jsを読み込みます。ページ読込後 $().touchSlider()でタッチスライド（スワイプ）のスライド・スクロールスピード等、各種オプションを指定します

<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>

タッチスライド（スワイプ）エリアのHTMLの記述

※タッチスライド（スワイプ）させるエリアに5枚画像を用意しました。必要に応じて変更して下さい。

<h1>画像を左右にタッチスライド（スワイプ）可能です</h1>


<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>
    
    <br />

    <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-->