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. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

  2. no-image
  3. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

  4. jQuery-Simple-MobileMenu
  5. Responsive Parallax Drag-slider With Transparent Letters

コメント

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

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

最近の記事

  1. 落ち葉と雪
  2. SOL001
  3. 末廣ラーメン

アーカイブ

PAGE TOP