複数画像をスマホやタブレットの様にタッチ(スワイプ)で左右にスライドさせてみます。
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-->