2009/04/06 23:51更新

Easy Slider - 画像やコンテンツをスライドで切り替えるjQueryプラグイン

TAGS: EasySlider | スライド | 画像 | jQuery | JavaScript

スポンサード リンク


Easy SliderはjQueryプラグインで、画像やHTMLコンテンツを水平・垂直でスライドさせて切り替えることができます。                                                    



>> デモ「Nextリンク」をクリックしてください
>> Easy Sliderを使った実際のサイト(かっこいい)

ライセンス:MITまたはGPL

簡単な使い方


1)<head></head>にeasySlider.jsスクリプトファイルを記述
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/easySlider.js"></script>


2)スライドさせたいコンテンツを記述
<div id="slider">
    <ul>

    <li>任意コンテンツ(画像やHTML要素)</li>
    <li>任意コンテンツ(画像やHTML要素)</li>
    <li>任意コンテンツ(画像やHTML要素)</li>
    ...
    </ul>
</div>


3)CSSによる見栄えの調整

4)JavaScriptによる初期化コードを記述
$(document).ready(function(){
    $("#slider").easySlider();
});

もしくは
$(document).ready(function(){ 
    $("#slider").easySlider({
        prevText: 'Previous Slide',
        nextText: 'Next Slide',
        orientation: 'vertical'
    });
});

Sponsored Link