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. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  2. jQuery cForm

    JavaScript

    フォームのスタイルをカスタマイズできる「jQuery cForm」

    jQuery cFormはフォームのスタイルを簡単にカスタマイズするこ…

  3. JavaScript

    軽量(5KB)で機能も色々あるjQueryのスライダー「MobilySlider」を使ってみる

    軽量なんですが、色々と機能もあるいい感じのjQueryプラグイン「Mo…

  4. WD_ImageStax

    JavaScript

    山積みされた写真をシャッフルさせるフォトギャラリー「WD_ImageStax」

    WD_ImageStaxは無造作に山積みされた写真をシャッフルさせるフ…

  5. Filterable Product Grid
  6. InlineTweet.js

    JavaScript

    Webページのテキストにツイートリンクを作成できる「InlineTweet.js」

    InlineTweet.jsはWebページのテキストにツイートリンクを…

コメント

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

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

最近の記事

  1. cheero Stream 10000mAh
  2. BOSE HOME SPEAKER 300
  3. RP-PC112
  4. SRS-XB402M
  5. Lite LR30

アーカイブ

PAGE TOP