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="http://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>
    
    <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-->

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

ソース元:TouchSlider – JavaScript slide content

最近フリックだとかタッチスライドだとかレスポンシブとか、
普通のサイトでスマホやタブレットに対応出来る様にってリクエストが出始めてる。