簡単に画像やコンテンツをスライドできるjQueryプラグイン Easy Image or Content Slider

Easy Sliderは、エリアを固定したまま左右上下に画像やコンテンツをスライドできるｊQueryプラグインです。

まずは下のデモをご覧ください。

サンプルデモ

設置方法

配布ページよりデータ一式をダウンロードし、easySliderを利用したいhtmlのhead要素などで以下のファイルおよび処理を読み込みます。

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="easySlider.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){	
		$("#slider").easySlider();
	});
</script>

表示する部分は以下です。

<div id="slider">
<ul>
<li>画像や文章その1</li>
<li>画像や文章その2</li>
<li>画像や文章その3</li>
</ul>
</div>

CSSの設定は以下のようになります。

#slider ul, #slider li {
	margin:0;
	padding:0;
	list-style:none;
}
#slider, #slider li { 
	width:500px;
	height:200px;
	overflow:hidden; 
}

設定が簡単なので、FLASHを使用するまでもないようなサイトトップページのメイン画像なんかに使えそうですね。

配布サイト

• jQuery plugin - Easy Image or Content Slider