Liquid Slider

JavaScript

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

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

[ads_center]

シンプルなデザイン

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

Liquid Slider

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

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

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

レスポンシブ対応

画面サイズを縮小。

画面サイズを縮小

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

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

関連記事

  1. justContext.js

    JavaScript

    シンプルなコンテキストメニューを実装できる「justContext.js」

    justContext.jsはjQueryなどを必要とせずに(ピュア …

  2. JavaScript

    jQuery illuminateを使えばボタンに光を加え点滅させたりして注目させることができる

    ちょっと面白そうだったので使ってみました。jQuery illumin…

  3. JavaScript

    ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「…

    なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuer…

  4. AJAX Live Search
  5. Before and after slider

コメント

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

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

最近の記事

  1. M360bt

アーカイブ

PAGE TOP