[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'
});

sponsors

top of page

©2018 coliss