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は垂直方向のカルーセルになります。

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

Chrome拡張機能「PageSpeed Insights」「PageSpeed Insights」のChrome拡張機能があったのでインストールしてみた前のページ

付箋にメモを書いて画面内に複数追加できるChrome拡張機能「Sticky Notes」次のページSticky Notes

関連記事

  1. EZ Plus

    JavaScript

    タッチにも対応した画像ズーム機能を実装できるjQueryプラグイン「EZ Plus」

    EZ Plusはタッチにも対応した画像ズーム機能を実装することができる…

  2. JavaScript

    リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Split…

    リスト化した要素を自分が指定した数に分割できるシンプルだけど便利なjQ…

  3. Multi-Level Menu

    JavaScript

    流れるような遅延アニメーションが美しい階層化メニュー実装「Multi-Level Menu」

    Multi-Level Menuは流れるような遅延アニメーションが美し…

  4. Checkify

    JavaScript

    軽量でカスタマイズ性も高いjQueryバリデーションプラグイン「Checkify」

    Checkifyは軽量でカスタマイズ性も高いバリデーション機能を実装で…

  5. JavaScript

    jQueryプラグイン・2014年上半期56選まとめ

    気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2…

  6. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

コメント

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

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

最近の記事

  1. RF85mm F2 MACRO IS STM
  2. Anker PowerWave Pad Alloy
  3. Anker Bolder LC30
  4. BG-R10

アーカイブ

PAGE TOP