Pogo Slider

JavaScript

豊富なスライドアニメーションが揃っているjQueryプラグイン「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

関連記事

  1. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  2. popModal

    JavaScript

    6種類のモーダルウィンドウを実装できる「popModal」

    popModalは6種類のモーダルウィンドウを実装することができるjQ…

  3. JavaScript

    ホバーすると中心から円形メニューが表示される「jQuery Wheel Menu」

    ホバーするとその地点を中心にして円形メニューが表示されるプラグイン「j…

  4. Ladda

    JavaScript

    ボタンとローディングアイコンが一緒になったUIを実装できるjQueryプラグイン「Ladda」

    Laddaはボタンとローディングアイコンが一緒になったUIを実装するこ…

  5. no-image

    JavaScript

    オシャレなスクロールエフェクトを実装できる「jQuery Smoove」

    jQuery Smooveは、オシャレなスクロールエフェクトを実装する…

  6. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP