HTML コード

ここに、1つのスクロールの設定があります。必要に応じ、 これをページに多数設定することができます。

<!-- scroll #1 -->
  <div class="scroll">
    <div class="pics">
      <div style="background-image:url(my-image-01.jpg)"></div>
      <div style="background-image:url(my-image-02.jpg)"></div>
      <div style="background-image:url(my-image-03.jpg)"></div>
    </div>
  </div>

CSS コード

ここに、CSSコードがあります。ここでは、本当に何も特別なものはありません。 スクロールは、float: left の設定により、横に並べて配置されます。 スタイルを設定した、アクティブなスクロール項目に別々のCSSブロックを持っています。

/* root element for single scroll */
.scroll {
	position:relative;
	overflow:hidden;
	width: 348px;
	height: 266px;
	float:left;
	margin-left: 2px;
	margin-bottom: 2px;
}

/* root element for the scroll pics */
.scroll .pics {
	width:20000em;
	position:absolute;
	clear:both;
}

/* single scroll item */
.pics div {
	float:left;
	cursor:pointer;
	width:400px !important;
	height:300px;
	margin:0px;
}

/* possible settings for the active scroll */
.scroll.active {
}

JavaScript コード

ここで、スクロールを可能にします。始めも終りもないように、すべてのScrollableは、 true に設定された circular コンフィギュレーションオプションを持っています。 Scrollable API の next() メソッドを使用して、 スクロールを前に進めるカスタム・クリックハンドラも追加しています。

// クリックハンドラで循環スクロールを可能にする
$(".scroll").scrollable({ circular: true }).click(function() {
	$(this).data("scrollable").next();
});