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. Expandy Menu

    JavaScript

    マウスオーバーで広がるメニューパネル「Expandy Menu」

    Expandy Menuはマウスオーバーすると横に広がるメニューパネル…

  2. CoutUpCircle

    JavaScript

    カウントアップしてくれるjQueryプラグイン「CoutUpCircle」

    CoutUpCircleは目標に指定した数までカウントアップしてくれる…

  3. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  4. Easy Responsive Tabs to Accordion

    JavaScript

    レスポンシブ対応のタブとアコーディオンで切り替わるjQueryプラグイン「Easy Responsi…

    今すぐにでも使いたいjQueryプラグインを見つけたので備忘録。レスポ…

  5. StellarNav.js

    JavaScript

    レスポンシブで多階層に対応したドロップダウンメニュー「StellarNav.js」

    StellarNav.jsはjQueryによるレスポンシブで多階層に対…

  6. Parallax Slider with jQuery

最近の記事

  1. M360bt

アーカイブ

PAGE TOP