jquery.touchslider.jsを使って、複数画像をスマホやタブレット操作の様にタッチスライド(スワイプ)で左右にスライドさせる方法をご紹介します。
Contents
ディスプレイ広告
タッチスライド(スワイプ)で複数画像を左右にスライドする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.min.js(1.8系)と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-->
jquery.touchslider.js:タッチスライド(スワイプ)で複数画像を左右にスライドするデモページ
jquery.touchslider.js:タッチスライド(スワイプ)で複数画像を左右にスライドするデモ
ソース元:TouchSlider – JavaScript slide content
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。