Hero slider

JavaScript

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

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

Hero slider

デモ

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

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

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

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

Hero slider

関連記事

  1. no-image

    JavaScript

    シンプルなドロップダウンメニューを実装できるjQueryプラグイン「snakeMenu」

    snakeMenuはシンプルなアニメーションによるドロップダウンメニュ…

  2. Playful Little Tooltip Ideas
  3. Animated Toggle Menu
  4. pull-to-reload

    JavaScript

    下へ引いてページをリフレッシュ(リロード)できる「pull-to-reload」

    pull-to-reloadは、Webページ内で下へ引くだけでページを…

  5. PopSelect

    JavaScript

    タグ形式のセレクトボックスをポップオーバーで表示させる「PopSelect」

    PopSelectはタグ付けするような感覚のセレクトボックスをポップオ…

  6. flubber

    JavaScript

    滑らかなシェイプアニメーションを実装できる「flubber」

    flubberは、滑らかな2Dによるシェイプアニメーションを実装するこ…

最近の記事

  1. M360bt
  2. BQ-CASE/1

アーカイブ

PAGE TOP