Liquid Slider

JavaScript

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

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

[ads_center]

シンプルなデザイン

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

Liquid Slider

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

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

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

レスポンシブ対応

画面サイズを縮小。

画面サイズを縮小

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

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

Macでライブラリフォルダを表示Macで見えなくなったライブラリフォルダを表示させる方法前のページ

複数のタイマーを設定して組み合わせることができるGoogle Chrome拡張機能「タイマーループ」次のページタイマーループ

関連記事

  1. TextTailor.js

    JavaScript

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

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

  2. no-image

    JavaScript

    カードを入れ替えるような3Dアニメーションによるスライダー「stack-slider」

    stack-sliderはカードを入れ替えるような3Dアニメーションに…

  3. no-image

    JavaScript

    ページ読み込み時に画面上部にプログレスバーを表示する「Skylo」

    Skyloはページ読み込み時にプログレスバーを画面上部に表示できるのが…

  4. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン19選のまとめ 2012/04 – 2012/0…

    2012年4月〜2012月7月までの当ブログで紹介したjQueryプラ…

  5. Validatr

    JavaScript

    HTML5のinput属性による検証ができるフォーム実装「Validatr」

    Validatrは、HTML5のinput属性を用いて検証できるさまざ…

  6. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

コメント

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

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

最近の記事

  1. 紫陽花
  2. 生ハム&モッツァレラチーズ サラダラップ
  3. コガネムシ
  4. ショルダーハム&5種の野菜サンドイッチ
PAGE TOP