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

コンテンツの幅指定の単位にパーセント(width:100%;)が使える、レスポンシブ レイアウト対応のコンテンツスライダーのjQueryのプラグインを紹介します。

デモのキャプチャ

Dynamic Carousel
デモページ

[ad#ad-2]

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.
	});
});

sponsors

top of page

©2024 coliss