[JS]アコーディオンとカルーセルが合体したスライダーのスクリプト -Accarousel

伸び縮みするアコーディオンと回転木馬のようにスライドするカルーセルを合体させたスライダーを実装するjQueryのプラグインを紹介します。

jQuery Accordion with Carousel – Accarousel

[ad#ad-2]

• Accarouselのデモ
• Accarouselの使い方

Accarouselのデモ

デモはFirefox, Chrome, Safari, Opera, IE7+でご覧ください。

デモページ

アコーディオンは各画像をクリックすると、アコーディオンのように画像が拡大表示されます。

デモページ：4枚目をアコーディオン

カルーセルは右下のナビゲーションでサムネイル画像をスライドさせます。
起点と終点があるのがちょっと残念。

[ad#ad-2]

Accarouselの使い方

実装は簡単で、3ステップです。

Step 1: 外部ファイル

「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。
※スタイルシートはLESS版も用意されています。

<link rel="stylesheet" type="text/css" href="accarousel.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.cjAccarousel.min.js"></script>

Step 2: HTML

カルーセル時とアコーディオン時の画像をリスト要素で実装します。

<div id="accarousel">
	<ul>
		<li>
			<a class="stand">カルーセル時の画像</a>
			<div class="detail-panel">アコーディオン時の画像</div>
		</li>
		...
	</ul>
</div>

Step 3: JavaScript

ラッパーをjQueryのセレクタで指定し、スクリプトを実行します。

<script type="text/javascript">
$(document).ready(function() {
	$('#accarousel').cjAccarousel();
});
</script>

スクリプトのオプション

オプションではカルーセル時に表示する画像の数、アニメーションのスピード・エフェクトなどを設定できます。

stand

カルーセル時の要素のclass名

panel

アコーディオン時の要素のclass名

pagerClass

ページ送りのclass名

x

パネルのハンドラーのclass名

groupOf

カルーセル時に表示する要素の数

scrollSpeed

スクロールのスピード

ease

エフェクト

flyOutGap

アコーディオン時の隙間

nextPrev

Next/Prevボタンの有無

オプションを使用すると下記のようになります。

<script type="text/javascript">
$(document).ready(function() {
	$('#accarousel').cjAccarousel({
		stand      : '.stand',
		panel      : '.detail-panel',
		pagerClass : 'pager',
		x          : '.detail-panel',
		groupOf    : 5,
		scrollSpeed: 1000,
		ease       : 'swing',
		flyOutGap  : 3,
		nextPrev   : true
	});
});
</script>