[JS]幅指定の単位にパーセント(%)が使えるコンテンツスライダーのスクリプト -Dynamic Carousel

サイト構築 -JavaScript

Post on:2011年8月19日

Dynamic Carouselのデモ

デモではページネーションが3タイプ用意されており、それぞれコンテンツのwidthが%で実装されています。
※ページネーションはHTML+CSSで自由に配置できます。

デモページ：ページネーション左右

デモページ：ページネーション下

デモページ：ページネーション左上

Dynamic Carouselの実装

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="js/plugin.js" type="text/javascript"></script>

HTML

各パネルはリスト要素で実装し、ページネーションと一緒にsection要素で内包します。
※デモ：ページネーション左右の例

<section class="first">
	<a href="#slider1" class="next">Next</a>
	<a href="#slider1" class="prev">Prev</a>
	<div class="slidewrap">
		<ol class="slider" id="slider1">
			<li class="intro">
				<h2>Slide 1</h2>
				<div class="copy col-3">
					<p>コンテンツ</p>
				</div>
			</li>
			<li>
				<h2>Slide 2</h2>
				<div class="copy col-2">
					<p>コンテンツ</p>
				</div>
			</li>
		</ol>
	</div>
</section>

[ad#ad-2]

JavaScript

jQueryのセレクタ（.slidewrap）でスライダーを指定し、スライドの単位（li）、スライドのスピードなどを設定します。

$(document).ready(function() {
	$('.slidewrap').carousel({
		slider: '.slider',
		slide: 'li',
		nextSlide: '.next',
		prevSlide: '.prev',
		speed: 300 // ms.
	});
});