jquery.tinycircleslider.jsを使ってサークル（円）状の画像スライダーを自分で作ってみよう！｜DAD UNION

ウェブサイトやブログを訪れたとき、画面に映し出される最初のビジュアルは、そのサイトに対する訪問者の印象を大きく左右します。魅力的で、インタラクティブな要素は、訪問者の興味を引き、より長くサイトに留まってもらうための鍵となります。そんなウェブデザインの世界における「新星」、すなわち円形画像スライダーの実装方法について、ステップバイステップで解説していきたいと思います。

今回は、webサイトやブログで目を引く素敵な画像スライダーを簡単に作れる方法をご紹介します。
その名も「jquery.tinycircleslider.js」。このツールを使えば、あなたのサイトに円形の画像スライダーを簡単に追加できます。

Contents

何故円形スライダーか？
ステップ1:CSSでスタイリング
ステップ2:HTMLの準備
ステップ3:JavaScriptで機能を追加
jquery.tinycircleslider.jsを使ってサークル（円）状に複数画像スライダーをコントロール表示するデモページ
ソース元：Tiny Circleslider
まとめ

何故円形スライダーか？

従来の水平または垂直のスライダーとは異なり、円形スライダーはビジュアルに新鮮さを与えるだけでなく、ユーザーインタラクションの新たな形を提供します。この形式は、特にポートフォリオサイトや製品紹介ページで効果的であり、訪問者に強い印象を残すことができます。

ステップ1:CSSでスタイリング

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>

ステップ2:HTMLの準備

スライダーをWebページに組み込むためには、まずHTML構造を準備する必要があります。以下は、3つの画像を含む基本的な構造の例です。
サークル（円）状の複数画像スライダーを表示エリア（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>

ステップ3:JavaScriptで機能を追加

最後に、jquery.tinycircleslider.jsを利用して、スライダーに動きを加えます。このライブラリを使うことで、スムーズなアニメーションと高度なカスタマイズが可能になります。

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>