JavaScript

jquery.tinycircleslider.jsを使ってサークル(円)状の画像スライダーを自分で作ってみよう!

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

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

何故円形スライダーか?

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

ステップ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>

jquery.tinycircleslider.jsを使ってサークル(円)状に複数画像スライダーをコントロール表示するデモページ

実際にこれらのステップを経て作成された円形スライダーのデモは、以下のリンクから確認できます。自分のプロジェクトに合わせてカスタマイズし、Webサイトに独自のインタラクティブな要素を加えてみてください。

jquery.tinycircleslider.jsを使ってサークル(円)状に複数画像スライダーをコントロール表示するデモページ

ソース元:Tiny Circleslider

Tiny Circleslider

まとめ

円形画像スライダーは、あなたのWebサイトにユニークなビジュアルとインタラクションをもたらす素晴らしい方法です。この記事を参考にしながら、自分だけのオリジナルスライダーを作成し、訪問者に忘れられない印象を与えてみてはいかがでしょうか。

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。