jquery.tinycircleslider.jsを使ってサークル(円)状に複数画像スライダーをコントロール表示する方法をご紹介します。
Contents
ディスプレイ広告
サークル(円)状に複数画像スライダーをコントロール表示するCSSの記述
※「/* Tiny Circleslider */」コメント以下がjquery.tinycircleslider.js関連のサークル(円)状に複数画像スライダーを表示するCSS記述です。必要に応じて変更して下さい。
<style> body { font-size: 16px; text-align: center; } h1{ text-align: center; font-size: 18px; line-height: 1.6em; padding-top: 20px; } p{ line-height: 1.6em; } img { border: 0; } /* Tiny Circleslider */ #rotatescroll { height:300px; position:relative; width:300px; } #rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px; pointer-events: none } #rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0; left: 0; top: 0; } #rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; } #rotatescroll .overlay {background:url(images/bg-rotatescroll.png) no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; } #rotatescroll .thumb { background:url(images/bg-thumb.png) no-repeat 50% 50%; touch-action: none; -ms-touch-action: none; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200; height: 100px; } #rotatescroll .dot { background:url(images/bg-dot.png) no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; } #rotatescroll .dot span { display: none; } </style>
サークル(円)状に複数画像スライダーをコントロール表示するHTMLの記述
※サークル(円)状の複数画像スライダーを表示エリア(id=”rotatescroll”)内にスライダー用の画像を3枚(1.jpg ~ 3.jpg)用意します。
<h1>jquery.tinycircleslider.jsを使ってサークル(円)状に複数画像スライダーをコントロール表示します。</h1> <p>緑の丸「●」にカーソルをあわあせて右クリックしながら左右にコントロールすると画像がスライドします。</p> <div id="rotatescroll"> <div class="viewport"> <ul class="overview"> <li><a href="/" target="_blank"><img src="images/1.jpg" width="300" /></a></li> <li><a href="/" target="_blank"><img src="images/2.jpg" width="300" /></a></li> <li><a href="/" target="_blank"><img src="images/3.jpg" width="300" /></a></li> </ul> </div> <div class="dot"></div> <div class="overlay"></div> <div class="thumb"></div> </div>
jquery.tinycircleslider.jsを使ってサークル(円)状に複数画像スライダーをコントロール表示するJavaScriptの記述
※jquery.min.js、hammer.js、jquery.tinycircleslider.jsファイルを読み込みます。$(‘サークル状の複数画像スライダーエリア’).tinycircleslider({ オプション })を記述します。オプションでは自動スライドやコントローラーの表示非表示等を設定できます。
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.tinycircleslider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#rotatescroll').tinycircleslider({ interval: true, dotsSnap: true, dotsHide: false }); }); </script>
jquery.tinycircleslider.jsを使ってサークル(円)状に複数画像スライダーをコントロール表示するデモページ
jquery.tinycircleslider.jsを使ってサークル(円)状に複数画像スライダーをコントロール表示するデモページ
ソース元:Tiny Circleslider
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。