NO IMAGE

JavaScript

フェード、スライド、水平、垂直などカスタマイズ性の高いスライダー「Prrple Slider」

Prrple Sliderはフェードアニメーションやスライド、ループ、水平、垂直など高いカスタマイズ性を有するjQueryプラグインです。タッチスワイプにも対応しているのでモバイルにも適しています。

Prrple Slider

Prrple Slider

デモにはいろんなタイプが用意されており、フェード、フェードループ、スライド(水平)、スライド(水平)ループ、スライド(水平)シームレスなループ、スライド(水平)シームレスなループ(Rich Swiping)、スライド(垂直)、スライド(垂直)ループ、スライド(垂直)シームレスなループ、スライド(垂直)シームレスなループ(Rich Swiping)など、カスタマイズにより多彩なスライダーが実装できるのを確認できます。

ただのループの場合は、最後のアイテムから最初のアイテムにスライドする時に、逆にスライドして戻りますが、シームレスなループの場合は、そのままの方向で最後のアイテムから最初のアイムにスライドしていきます。

スライダーの両端には前後スライドできる左右(LeftとRight)のテキストが表示されているほか、下部にはナビゲーションも設置されています。

また、オプションもたくさん用意されているので、細かいカスタマイズをして使いたい人にもうれしい仕様になっています。

先ほどのループやシームレスの有効・無効はもちろん、width、height、水平/垂直、フェード/スライド、自動再生、コールバックなど多彩なオプション設定が可能です。

というわけで、カスタマイズ性の高いスライダーを実装したいという人は、ぜひ「Prrple Slider」をチェックしてみてはいかがでしょうか。

関連記事

  1. TextTailor.js

    JavaScript

    コンテナ内のフォントサイズを自動リサイズしてくれるjQueryプラグイン「TextTailor.js…

    TextTailor.jsはブラウザ幅に合わせてコンテナ内のテキストの…

  2. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

  3. JavaScript

    jQuery MobileでWebサイトをスマートフォン対応にする時に見ておきたい記事のまとめ

    今更ながらようやくjQuery Mobileを使い始めたんですが、基本…

  4. Building a Vertical Timeline With CSS and a Touch of JavaScript
  5. no-image

    JavaScript

    ダイナミックに回転してコンテンツが切り替わる「Page Scroll 3D」

    Page Scroll 3Dは、クルッとダイナミックに回転してコンテン…

  6. Bootstrap Show Password

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP