Pogo Sliderは豊富なスライドアニメーションが揃っているjQueryプラグインです。スライドダウン、スライドアップ、スピン、3Dフリップ、回転などスライダーに関するたくさんの種類のアニメーションが用意されています。
Pogo Slider
以下のページからPogo Sliderの実際のデモを確認することができます。
デモではスライド、ブロック、スプリット、zip、expand、fold、フェードなど数多くのスライドトランジション動作を確認することができます。他にもスライドダウン、スライドアップなどのエレメントトランジションもチェックできます。
オプションで設定できる項目もかなりあるので、カスタマイズしたスライダーを実装したい方にはピッタリですね。
自動再生やレスポンシブのオン／オフなどを指定することができます。
使い方はこんな感じでマークアップしていきます。
1 2 3 4 5 6 7 8 | <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のセッティングです。
1 2 3 4 5 6 7 8 9 | $(document).ready(function () { var mySlider = $('.my-slider').pogoSlider().data('plugin_pogoSlider'); mySlider.pause(); mySlider.resume(); mySlider.nextSlide(); mySlider.prevSlide(); mySlider.toSlide(2); mySlider.destroy();}); |
ダウンロードや詳細については以下からどうぞ。
