skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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, //縦方向にスライドさせます。
});
jQueryプラグイン「Easy Slider」でスライダーを簡単導入

記事作成：2009年02月13日

前の記事：JavaScriptでタブメニューを簡単に作る「Semantic Tabs」
次の記事：フォーム入力内容に近い言葉だけ表示するjQueryプラグイン「flexselect」