jQuery Waterwheel Carousel

JavaScript

水平や垂直方向に配置できる水車のような便利なカルーセル「jQuery Waterwheel Carousel」

水平方向や垂直方向に配置できる水車のような便利なカルーセル「jQuery Waterwheel Carousel」をご紹介します。とてもシンプルなデザインと機能で使いやすそうなjQueryプラグインです。HTMLやCSSも複雑に記述する必要はなく、必要最小限に抑えられているのが嬉しいですね。以下、使い方です。

[ads_center]

使い方

jQuery Waterwheel Carouselを開始するためのjQueryコード。

$(document).ready(function () {
  $("#waterwheel-carousel").waterwheelCarousel({
    horizon: 110,
    horizonOffset: -50,
    horizonOffsetMultiplier: .7,
    separation: 150
  });
});

CSSではカルーセルの幅や高さの指定をしておきます。

#waterwheel-carousel {
  width:900px;
  height:250px;
  position:relative;
  clear:both;
  overflow:hidden;
  margin:0 auto;
}
#waterwheel-carousel img {
  visibility:hidden;
  cursor:pointer;
}

HTMLはこんな感じで。とてもシンプルですね。

<div d="waterwheel-carousel">
  <img src="画像パス" />
  <img src="画像パス" />
  <img src="画像パス" />
  <!-- 以下略 -->
</div>

jQuery Waterwheel Carousel

以下はArching Effectの実際のデモです。

その他にも、「Flat, Side Scrolling」と「Vertical Orientation」のデモもあります。Flat, Side Scrollingはフラットな水平方向のカルーセルで、Vertical Orientationは垂直方向のカルーセルになります。

オプションもいくつかあるので、詳しくは公式サイトで確認することができます。カルーセルを使いたい際には、覚えておきたいプラグインですね。

関連記事

  1. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

  2. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

  3. roundSlider

    JavaScript

    値の範囲を円形スライダーで表示できる「roundSlider」

    roundSliderは値の範囲を円形スライダーで表示できるjQuer…

  4. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  5. Animocons

    JavaScript

    アイコンに素敵なアニメーションを実装できる「Animocons」

    Animoconsはアイコンにさまざまなアニメーションを加えることがで…

  6. Grasp Mobile Progress Circle

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP