[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」です。

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