Liquid Slider

JavaScript

タブパネル式のレスポンシブなjQueryスライダー「Liquid Slider」

ちょっと珍しそうなスライダーを見つけたのでご紹介します。タブパネルにもなっているレスポンシブなjQueryスライダー「Liquid Slider」です。前後のスライドボタンの他にもパネルのメニューをクリックすることでもスライドさせることができます。レスポンシブ対応なのでスマホで見てもサイズ調整されます。

[ads_center]

シンプルなデザイン

こんな感じでタブパネルにもなっているスライダーです。

Liquid Slider

前後のボタンや上部タブをクリックしてもスライドさせることができます。ページナビの役割も果たしてますね。

上部タブでもスライドできる

レスポンシブにも対応しているので、このようにブラウザの幅に応じてスライダーのサイズも調整されていきます。

レスポンシブ対応

画面サイズを縮小。

画面サイズを縮小

スマホでもスライダーを実装したい時には1つの候補として覚えておきたいですね。

以下からダウンロードできます。

関連記事

  1. MG Space

    JavaScript

    Google画像のようなアコーディオンプラグイン「MG Space」

    MG SpaceはGoogle画像のようなjQueryアコーディオンプ…

  2. evol-colorpicker

    JavaScript

    マイクロソフト オフィス2010のようなカラーピッカー「evol-colorpicker」

    evol-colorpickerは、マイクロソフト オフィス2010の…

  3. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  4. no-image

    JavaScript

    プレーンなJavaScriptによるレスポンシブなLightbox「jsOnlyLightbox」

    jsOnlyLightboxは、jQueryなどを必要としないプレーン…

  5. Stretchy Navigation

    JavaScript

    ナビゲーションメニューが伸び縮みする「Stretchy Navigation」

    Stretchy Navigationはクリック、タップをすることで伸…

  6. no-image

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

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

アーカイブ

PAGE TOP