Hero slider

JavaScript

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

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

Hero slider

デモ

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

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

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

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

Hero slider

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

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

関連記事

  1. Unite Gallery

    JavaScript

    レスポンシブな画像・動画ギャラリーを実装できる「Unite Gallery」

    Unite Galleryは、レスポンシブに対応した画像・動画ギャラリ…

  2. jquery.peekABar

    JavaScript

    様々なカスタマイズができる便利な通知バー「jquery.peekABar」

    jquery.peekABarは様々なカスタマイズが可能な通知バー(通…

  3. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  4. basicScroll

    JavaScript

    モバイル・デスクトップに対応したパララックススクロール実装「basicScroll」

    basicScrollはモバイル・デスクトップに対応したスタンドアロー…

  5. Magnific Popup

    JavaScript

    レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」

    レスポンシブに対応したLightbox風のjQueryプラグイン「Ma…

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP