高機能なAjaxライブラリjQueryを使ったスライドショー。

easy slider1.5

デモ

• デモ１（cssスタイルなし）
  デモ２（cssスタイル適用）
  デモ３（cssスタイルなし、垂直方向にスライド）
  デモ４（cssスタイル適用、自動スライド）
  デモ５（複数のスライダーを設置）

設置方法

easy slider 配布ページよりデータをダウンロードします。

head要素に以下を埋め込みます。（デモ４）

<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/easySlider1.5.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#slider”).easySlider({
auto: true,
continuous: true });
});
</script>

表示する部分は次の通りです。

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

CSSの設定（デモ４）

#slider{}
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider li{
	width:696px;
	height:241px;
	overflow:hidden;
	}
#prevBtn, #nextBtn{
	display:block;
	width:30px;
	height:77px;
	position:absolute;
	left:-30px;
	top:71px;
	}
#nextBtn{
	left:696px;
	}
#prevBtn a, #nextBtn a{
	display:block;
	width:30px;
	height:77px;
	background:url(images/btn_prev.gif) no-repeat 0 0;
	}
#nextBtn a{
	background:url(images/btn_next.gif) no-repeat 0 0;
	}

画像やテキストなどを配置することが可能です。スライドのコントローラーはテキストや画像を使用することができます。