Hero slider

JavaScript

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

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

Hero slider

デモ

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

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

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

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

Hero slider

関連記事

  1. mgGlitch

    JavaScript

    グリッチ効果を付けれるjQueryプラグイン「mgGlitch」

    mgGlitchは、CSS3の変換を利用して指定した要素にアニメーショ…

  2. no-image

    JavaScript

    マウスの動作に連動するシャドウエフェクト実装「Jquery Shadow Plugin」

    Jquery Shadow Pluginはマウスの動作に連動するシャド…

  3. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

  4. no-image

    JavaScript

    スライドアニメーションによる多階層なハンバーガーメニュー「ggContentMenu」

    ggContentMenuはスライドアニメーションを備えた多階層に最適…

  5. jquery.stepper.js

    JavaScript

    マウス操作で値の増減ができるjQueryプラグイン「jquery.stepper.js」

    jquery.stepper.jsは、マウス操作から手軽に値の増減を行…

  6. Auto-Text-Scroll

    JavaScript

    自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

    Auto-Text-Scrollは自動でテキストが垂直でスクロールして…

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP