豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」

Pogo Slider

Pogo Sliderは豊富なスライドアニメーションが揃っているjQueryプラグインです。スライドダウン、スライドアップ、スピン、3Dフリップ、回転などスライダーに関するたくさんの種類のアニメーションが用意されています。

Pogo Slider

デモ

デモではスライド、ブロック、スプリット、zip、expand、fold、フェードなど数多くのスライドトランジション動作を確認することができます。他にもスライドダウン、スライドアップなどのエレメントトランジションもチェックできます。

オプションで設定できる項目もかなりあるので、カスタマイズしたスライダーを実装したい方にはピッタリですね。

自動再生やレスポンシブのオン/オフなどを指定することができます。

使い方はこんな感じでマークアップしていきます。

<div class="pogoSlider">
    <div class="pogoSlider-slide" data-transition="slideOverLeft" data-duration="1000"  style="background-image:url(img1.jpg);">
        <h2 class="pogoSlider-slide-element" data-in="slideDown" data-out="slideUp" data-duration="750" data-delay="500">
        ここにコンテンツ
        </h2>
    </div>
<div class="pogoSlider-slide " data-transition="fold" data-duration="1000"  style="background-image:url(img2.jpg);"></div>
</div>

以下はPogo Sliderのセッティングです。

$(document).ready(function () {
    var mySlider = $('.my-slider').pogoSlider().data('plugin_pogoSlider');
        mySlider.pause();
        mySlider.resume();
        mySlider.nextSlide();
        mySlider.prevSlide();
        mySlider.toSlide(2);
        mySlider.destroy();
});

Pogo Slider

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives