[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider

アニメーションでパネルがスライドするスライドショーのjQueryの超軽量プラグインを紹介します。

jQuery.TinySlider
デモ

[ad#ad-2]

jQuery.TinySliderの実装

HTML

スライドで表示されているイメージはdiv要素の背景画像です。

<div id="slider">
	<div class="image" style="background-image: url(img/img1.jpg);">Simple</div>
	<div class="image" style="background-image: url(img/img2.jpg);">Light</div>
	<div class="image" style="background-image: url(img/img3.jpg);">Easy</div>
</div>

JavaScript

「jquery.js」と「jquery.slider.js」を外部ファイルとし、下記のスクリプトを記述します。
※下記はデモの例です。

$(function() {
	$('#slider').slider({
		showControls: true,
		showPosition: false,
		direction: 'right'
	});
});

[ad#ad-2]

スクリプトのオプション

showPosition

現在表示しているパネルと総枚数の有無

wait

次のフレームまでの待ち時間

fade

フェードの時間

showControls

コントローラーの有無

direction

スライドの方向

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

$('#slider').slider({
	showPosition: true,
	wait: 8000,
	fade: 2000,
	showControls: true,
	direction: 'left'
});