[JS]サークル状のUIが面白い、カルーセルのスクリプト -Tiny Circleslider

使いどころは難しいですが、面白いユーザインターフェイスを備えた画像をスライド表示するカルーセルのスクリプトを紹介します。

デモのキャプチャ

Tiny Circleslider
デモ

[ad#ad-2]

画像は他のスクリプトと組み合わせて、拡大表示することも可能です。

デモのキャプチャ

デモ3:画像をクリックすると拡大します。

Tiny Circlesliderの特徴

  • わずか4KBの軽量スクリプト。
  • カスタマイズは簡単。
  • スライド操作は手動と自動に対応。
  • スライドの半径は自由に設定可能。
  • すべての動作にcallbackを設定可能。
  • オプションも豊富に用意。

[ad#ad-2]

Tiny Circlesliderの実装

HTML

カルーセルで表示する各画像はリスト要素で実装します。
HTMLの基本は下記のようになります。

<div id="rotatescroll">
	<div class="viewport">
		<ul class="overview">
			<li><a rel="group" href="images/hdr1.jpg"><img src="images/hdr1.jpg"></a></li>
			<li><a rel="group" href="images/hdr2.jpg"><img src="images/hdr2.jpg"></a></li>
			<li><a rel="group" href="images/hdr3.jpg"><img src="images/hdr3.jpg"></a></li>
			<li><a rel="group" href="images/hdr4.jpg"><img src="images/hdr4.jpg"></a></li>							                             
		</ul>
	</div>
</div>

デモは三種類、掲載されており、それぞれスクリプトのオプションを変えることで実装できます。

デモのキャプチャ

JavaScript:左(オプション無し)

$('#rotatescroll1').tinycircleslider();

JavaScript:右

$('#rotatescroll2').tinycircleslider({ interval: true, snaptodots: true });
デモのキャプチャ

JavaScript

$('#rotatescroll3').tinycircleslider({ lightbox: true, snaptodots: true, radius: 170, hidedots: false });

画像の拡大に使用にしているスクリプトは、「Fnacybox」です。

デザインはスタイルシートで自由に変更することが可能で、上記デモのスタイルシートも元記事で解説されています。

sponsors

top of page

©2018 coliss