アコーディオンスタイルのjQueryスライダーColcarouの使い方

アコーディオン形式のjQueryスライダープラグインのColcarouの使い方をご紹介したいと思います。このjQueryプラグインは、水平に画像が切り替わる様になっています。 このバージョンではレスポンシブには対応していませんが、今後対応する予定とのことです。

1.デモ

デモを作成しましたのでよろしかったら、ここをクリックしてください。

2.ダウンロード

公式ページに行って、ダウンロードしてください。ダウンロード完了し解凍すると「colcarou-master」フォルダーができます。

3.必要なファイル

「colcarou-master」フォルダーの中の「src」フォルダーにある以下のファイルを自分のフォルダーにコピーします。 colcarou.min.css colcarou.min.js

4.HTMLの編集

headタグ内で、スタイルシートとjQuery本体とプラグインを読み込みます。

<link href="./css/colcarou.min.css" rel="stylesheet" type="text/css" />
<script> src="./js/jquery-1.12.0.min.js" ></script>
<script src="./js/colcarou.min.js" type="text/javascript"></script>
</head>

bodyタグ内で、h1タグにタイトルと画像とテキストを追加します。

	<div class="colcarou-slider">
		<div>
			<div>
				<h1>Slide 1</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</p>
				<a href="#">More</a>
			</div>
			<img src="./images/sample1.jpg" />
		</div>
		<div>
			<div>
				<h1>Slide 2</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</p>
				<a href="#">More</a>
			</div>
			<img src="./images/sample2.jpg" />
		</div>
		<div>
			<div>
				<h1>Slide 3</h1>
				<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</p>
				<a href="#">More</a>
			</div>
			<img src="./images/sample3.jpg" />
		</div>
	</div>

bodyタグの最後の方でプラグインの初期化を行います。

<script>
	$('.colcarou-slider').colcarou({
		slide_width:100
	});
</script>
</body>

5.CSSの編集

デフォルトだとテキストと「More」が重なるため、下ににさげるために設定しています。

.colcarou-slider p {
	margin: 12px 0;
}

6.オプション

オプションは３つあります。

オプション	初期値	説明
slide_width	70ピクセル	画像をずらす幅
frame_width	965ピクセル	フレームの幅
frame_height	450ピクセル	フレームの高さ