Hero slider

JavaScript

レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

Hero sliderはレスポンシブに対応した横幅フルサイズのスライダーを実装することができるjQueryプラグインです。ブラウザいっぱいに広がったダイナミックなスライド動作が可能なのでインパクトあるスライダーを取り入れたい時に活用してみたいところです。

Hero slider

デモ

デモではスライダー下部にナビゲーションのタブメニューが設置されており、各メニューをクリックすることでコンテンツがスライドしていきます。

テキスト以外にも動画や画像など様々なコンテンツを表示させることができます。

また、レスポンシブ対応になっているのでブラウザ幅を縮小してもレイアウトが最適化されます。ナビゲーションメニューはそのままのスタイルで縮小されていくので、PCやスマホなどいろんなデバイスからの操作感がほとんど変わらないのが便利ですね。

というわけで、横幅いっぱいに広がったフルサイズのjQueryスライダーを実装したい方は是非チェックしてみてください。

Hero slider

Pongstagr.am自分のインスタグラムの画像を表示できるjQueryプラグイン「Pongstagr.am」前のページ

セレクトボックスをカスタマイズして使いやすくしてくれる「zelect」次のページzelect

関連記事

  1. no-image

    JavaScript

    超シンプルでオプションもわかりやすいjQueryスライダー「Free Simple Slider」

    Free Simple Sliderは、超シンプルで使い方も簡単なスラ…

  2. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  3. vTicker

    JavaScript

    シンプルで使い方も簡単!垂直ティッカーを実装できるjQueryプラグイン「vTicker」

    シンプルで使い方も簡単な垂直ティッカーを実装できるjQueryプラグイ…

  4. hop

    JavaScript

    Webページ上の好きな場所をハイライトできる「hop」

    hopはオーバーレイされたWebページ上の好きな場所をハイライトするこ…

  5. jquery-base-slider
  6. Albumize

    JavaScript

    アルバムみたいな画像コレクションのギャラリーを管理・実装できるjQueryプラグイン「Albumiz…

    Webページにある画像コレクションをアルバムのようなギャラリーに管理・…

最近の記事

  1. ダミアン・ハースト 桜
  2. パッキングエリア
  3. あらびきソーセージパイ
  4. REACH フロス
PAGE TOP