デモ:スクロールスライダーへナビ機能を追加(マニュアル)

jQuery toolsによる「スクロールスライダーへナビ機能を追加(マニュアル)」の動作デモです。

サンプルコード

HTMLのサンプル

<!-- ナビをここに追加 -->
<div class="naviWrap">
	<li class="active"><a href="#fir">nav1</a></li>
	<li><a href="#sec">nav2</a></li>
</div>

<!-- "前へ移動" -->
<a class="prev browse left">prev</a>

<!-- スクロールアイテム・ルート -->
<div class="scrollable">   
	<!-- スクロールアイテム・セット -->
	<div class="items">
		<!-- 1-3 -->
		<div>
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50a.png" style="margin-left:5px;" />
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50b.png" />
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50c.png" />
		</div>
		<!-- 4-6 -->
		<div>
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50d.png" style="margin-left:5px;" />
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50e.png" />
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50f.png" />
		</div>
	</div>
</div>
<!-- "次へ移動" -->
<a class="next browse right">next</a>

CSSのサンプル

/* ボタン */
#example .browse{
	display:block;
	float: left;
	width: 30px;
	height: 16px;
	margin-top: 20px;
	background: url(http://nekodama.sakura.ne.jp/images/webdev/jquerytools/tool/ic_arrow.png) no-repeat;
	cursor: pointer;
}
#example .prev{	background-position: 0 0; padding-left: 18px;}
#example .prev:hover{	background-position: 0 -100px;}
#example .next{	background-position: -470px 0; padding-right: 18px;}
#example .next:hover{	background-position: -470px -100px;}
#example .disabled{	background: none; color: #999; cursor: default;}

/* パネルを囲う要素 */
#example .scrollable {
	float: left;
	margin: 0 10px;
	border: solid 1px #999;
	padding: 5px;
	background: #eee;
	position:relative;
	overflow:hidden;
	width: 270px;
	height:56px;
}
#example .scrollable img{
	margin-right: 5px;
	border: solid 2px #eee;
	cursor: pointer;
}
#example .scrollable .items {
	width:20000em;
	position:absolute;
}
#example .items div {
	float:left;
}
#example .btnSet{
	clear: both;
	width: 480px;
	padding: 10px;
}
/* position and dimensions of the navigator */
#example .naviWrap {
	margin: 0 0 10px 140px;
	width:400px;
	height:40px;
	overflow: hidden;
}
/* items inside navigator */
#example .naviWrap a {
	margin:3px;
	padding: 5px 8px;
	display:block;
}
#example .naviWrap li{
	float:left;
	padding: 3px;
}
#example .naviWrap li.active{
	border: dotted 3px orange;
	padding: 0;
}

Javascriptのサンプル

$(function() {
	// 基本の例
	var root = $(".scrollable").scrollable({
		circular: true     // 繰り返し
	}).navigator({
		navi: ".naviWrap", // ナビのコンテナ
		naviItem: null,
		activeClass: "active",  // アクティブナビのクラス名
		indexed: false,   // インデックス番号を表示
		idPrefix: null,   // IDを付与
		history: false    // 履歴
	});
});