Hover Carousel

JavaScript

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

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

Hover Carousel

デモ

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

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

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

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

Hover Carousel

関連記事

  1. no-image

    JavaScript

    スクロール時に要素を固定できるjQueryプラグイン「ScrollFix」

    ScrollFixはスクロール時に特定の要素を固定して表示できるjQu…

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

    JavaScript

    jQueryのeachメソッドのお勉強

    今回はjQueryのeachメソッドを使ってみました。なんかとても便利…

  3. miSlider

    JavaScript

    複数の画像を表示したりスライドしたりできるスライダー「miSlider」

    miSliderは複数の画像やスライドの表示を可能にするスライダーを実…

  4. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

  5. Impulse Slider

    JavaScript

    3Dスライダーを実装できるjQueryプラグイン「Impulse Slider」

    Impulse SliderというjQueryプラグインを使えば3Dス…

最近の記事

  1. マリアージュ フレール 紅茶チョコレート
  2. CD-ADE1BK
  3. 渋谷スクランブルスクエアからの夜景

アーカイブ

PAGE TOP