3DスライドショーjqueryプラグインjR3DCarouselの使い方

このスライドショーのjqueryプラグインは、軽量コンパクトでレスポンシブな3Dイメージスライダーです。画像の切り替えが立体的になっていて見ていて楽しいです。

画面切り替えは3Dだけではなく、従来のスライドやフェードも使用できます。あとマウスホバー中は、画像が切り替わりません。

1.デモ

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

2.ダウンロード

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

3.必要なファイル

distフォルダーの「jR3DCarousel.min.js」を自分のフォルダーにコピーします。

4.CSSの編集

CSSは特に必要ありません

5.HTMLの編集

headタグ内でjqueryファイルを読み込みます。

<script type="text/javascript" src="./js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="./js/jR3DCarousel.min.js"></script>
</head>

bodyタグ内で以下の１行だけです。

	<div class="jRCarousel"></div>

画像ファイルの登録は<script>タグ内で行い、スクリプトの実行は</body>タグの直前に記述します。

<script>
	var slides = [
		{src: "./images/s001.jpg"},
		{src: "./images/s002.jpg"},
		{src: "./images/s003.jpg"},
		{src: "./images/s004.jpg"}
	];
	$(".jRCarousel").jR3DCarousel({
		width : 800,
		height: 300,
		slides: slides,
		slideLayout: "cover",
		animationInterval: 2000,
		animationDuration: 600,
		animation: "slide3D"
	});
</script>
</body>

6.オプションの説明