jQueryプラグイン「Easy Slider」でスライダーを簡単導入

スライダーを導入したい。
でも導入は難しそうだからと、見送っていませんか。
jQueryプラグイン「Easy Slider」なら、あなたのサイトでもすぐに使用できます。

sponsors

使用方法

Easy Sliderからファイル一式をダウンロードします。

<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript" src="easySlider.packed.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
	$("#slider").easySlider();
});
</script>
そしてスライドさせたいコンテンツを以下のように記述します。

<div id="slider">
	<ul>				
		<li>スライドコンテンツ</li>
		スライド分
	</ul>
</div>
あとはコンテンツにあわせてCSSを調整します。

#slider ul, #slider li{margin:0;padding:0;list-style:none;}
#slider, #slider li{width:696px;height:241px;overflow:hidden;}
span#prevBtn{margin-right:10px;} //戻るボタン
span#nextBtn{}	//進むボタン
なお、オプションとして以下があります。

$("#slider").easySlider({
	prevText: '<< 前へ', //戻るボタンのテキスト変更
	nextText: '次へ >>' //進むボタンのテキスト変更
	vertical: true, //縦方向にスライドさせます。

});

サンプル

sponsors

Javascriptサンプルページ一覧
skuare.net