Hover Carousel

JavaScript

超軽量なホバーカルーセルを実装できる「Hover Carousel」

Hover Carouselは超軽量なホバーで動作するカルーセルを実装することができます。カルーセルに設置された画像にマウスオーバーすることで、左右への移動を可能にしているのが特徴です。容量がとても軽量なところがいいですね。

Hover Carousel

デモ

デモではサムネイル画像がいくつか横に並んでおり、マウスオーバーすることで画像リストを左右にスライド移動できるようになっています。

ホバー中は、画像リストの下部にナビゲーションバーも表示されるので、自分がいまどのあたりの位置にいるのかを瞬時に把握することができます。

シンプルですが、ファイル容量も軽いのでサクサク動作するのがいいですね。ちょっとしたカルーセルタイプの画像ギャラリーをサクッと自サイトに実装したいなんてときに活用してみてはいかがでしょうか?

というわけで、以上、超軽量なホバーによるカルーセルを実装することができる「Hover Carousel」のご紹介でした。

Hover Carousel

関連記事

  1. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

  3. JavaScript

    要素の位置までスクロールしてスピード設定もできるjQueryプラグイン「scrollToBySpee…

    scrollToBySpeedは指定した要素の位置までスクロールしてく…

  4. no-image

    JavaScript

    カスタマイズもできるダイナミックなコンタクトフォーム「Swyft Callback」

    Swyft Callbackはカスタマイズもできるダイナミックで美しい…

  5. Nex

    JavaScript

    ダイナミックで美しいフルスクリーンのjQueryスライダーを実装できる「Nex」

    Nexはダイナミックで様々なアニメーションエフェクトが用意されたフルス…

  6. Adi.js

    JavaScript

    アドブロックを検知してくれる「Adi.js」

    Adi.jsはアドブロックを検知してくれるjQueryプラグインです。…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP