jquery.tinycircleslider.jsを使ってサークル（円）状に複数画像スライダーをコントロール表示する方法｜DAD UNION

jquery.tinycircleslider.jsを使ってサークル（円）状に複数画像スライダーをコントロール表示する方法をご紹介します。

Contents

サークル（円）状に複数画像スライダーをコントロール表示するCSSの記述
サークル（円）状に複数画像スライダーをコントロール表示するHTMLの記述
jquery.tinycircleslider.jsを使ってサークル（円）状に複数画像スライダーをコントロール表示するJavaScriptの記述
jquery.tinycircleslider.jsを使ってサークル（円）状に複数画像スライダーをコントロール表示するデモページ
ソース元：Tiny Circleslider

サークル（円）状に複数画像スライダーをコントロール表示する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>