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. Random Quote Machine

    JavaScript

    ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

    Random Quote Machineは、設定したデータのなかからラ…

  2. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  3. jQuery-TimelineMe

    JavaScript

    シンプルなタイムラインを簡単につくれる「jQuery-TimelineMe」

    jQuery-TimelineMeは、タイムラインを簡単に構築すること…

  4. Multi-Level Accordion Menu
  5. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

  6. Tiny Colorpicker

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP