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

スライダーを導入したい。
でも導入は難しそうだからと、見送っていませんか。
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」でスライダーを簡単導入

sponsors

「jQueryプラグイン「Easy Slider」でスライダーを簡単導入」をシェアする

記事作成:
記事URL:

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