NO IMAGE

JavaScript

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

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

Prrple Slider

Prrple Slider

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

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

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

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

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

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

関連記事

  1. JavaScript

    jQueryプラグインのレスポンシブなカルーセルのスライダー「Elastislide」を使ってみた

    jQueryプラグインで画面のサイズによってレイアウトを合わせてくれる…

  2. JavaScript

    縦スクロールすると横スクロール(水平移動)していくjQueryプラグイン「jInvertScroll…

    これおもしろいですね。縦スクロールすると垂直に移動していくのではなくて…

  3. JavaScript

    カスタマイズしやすい軽量のツールチップを実装できるjQueryプラグイン「TinyTip」

    TinyTipはカスタマイズしやすいツールチップを実装することができる…

  4. Scroll To Top Then Fixed Navigation Effect With jQuery and CSS
  5. Canvi

    JavaScript

    左右からスライド表示するシンプルなナビゲーションメニュー「Canvi」

    CanviはVanilla JSによるシンプルなナビゲーションメニュー…

  6. FREVR

    JavaScript

    シンプルな無限スクロールを実装できるjQueryプラグイン「FREVR」

    FREVRはシンプルで軽量な無限スクロールの機能を実装することができる…

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる

アーカイブ

PAGE TOP