Sly の使い方 – スクロールとナビゲーションをJavaScriptで実装

このエントリーをはてなブックマークに追加
Bookmark this on Google Bookmarks
LINEで送る
Pocket

アイテムベースのスクロールとナビゲーションを実装できる Slyの使い方
Sly http://darsa.in/sly/

HTMLの構造はこうなっている
FRAME、SLIDEE、CONTENT ITEMSの関係を理解する
sly

横スクロールのサンプルページ
http://darsa.in/sly/examples/horizontal.html

このサンプルページのソースを見てみる。
読み込まれているファイルの中で自分で試してみるのに必要なのは、
jquery.js
plugins.js
sly.min.js
horizontal.js
horizontal.css

上３つはSLYを使うための基本的なファイル、
このサンプルでは、オプションの設定を horizontal.js、見た目の設定を horizontal.css で行っている

この中からフレームに１つのアイテムが表示されるサンプル’One item per frame’を以下に抜粋
（上記ファイルはfiles以下に入れている）

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Horizontal examples - Sly</title>
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="files/horizontal.css">
</head>
<body>
	<div >
		<div class="wrap" style="width:970px; margin: 0 auto;">
			<h2>One item per frame</h2>

			<div class="scrollbar">
				<div style="transform: translateZ(0px) translateX(0px); width: 71px;" class="handle">
					<div class="mousearea"></div>
				</div>
			</div>

			<div style="overflow: hidden;" class="frame oneperframe" id="oneperframe">
				<ul style="transform: translateZ(0px); width: 18256px;" class="clearfix">
					<li class="active"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li>
					<li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li class="">15</li>
				</ul>
			</div>

			<div class="controls center">
				<button disabled="disabled" class="btn prev disabled"><i class="icon-chevron-left"></i> prev</button>
				<button class="btn next">next <i class="icon-chevron-right"></i></button>
			</div>
		</div>
	</div>

	<!-- Scripts -->
	<script src="files/jquery.js"></script>
	<script src="files/plugins.js"></script>
	<script src="files/sly.min.js"></script>
	<script src="files/horizontal.js"></script>
</body></html>

horizontal.js 抜粋
FLAMEとして使うオブジェクトの指定やオプションの設定を行っている。
オプション一覧はこちら
https://github.com/Darsain/sly/wiki/Options

// -------------------------------------------------------------
//   One Item Per Frame
// -------------------------------------------------------------
(function () {
	var $frame = $('#oneperframe');
	var $wrap  = $frame.parent();

	// Call Sly on frame
	$frame.sly({
		horizontal: 1,
		itemNav: 'forceCentered',
		smart: 1,
		activateMiddle: 1,
		mouseDragging: 1,
		touchDragging: 1,
		releaseSwing: 1,
		startAt: 0,
		scrollBar: $wrap.find('.scrollbar'),
		scrollBy: 1,
		speed: 300,
		elasticBounds: 1,
		easing: 'easeOutExpo',
		dragHandle: 1,
		dynamicHandle: 1,
		clickBar: 1,

		// Buttons
		prev: $wrap.find('.prev'),
		next: $wrap.find('.next')
	});
}());

horizontal.css 抜粋

/* One Item Per Frame example*/
.oneperframe { height: 300px; line-height: 300px; }
.oneperframe ul li { width: 1140px; }
.oneperframe ul li.active { background: #333; }

スクロールバーやボタンの見た目もこのCSSで設定しているので、見た目を変えたい時は変更する

参照
Slyオブジェクトのプロパティ、メソッド、イベント（コールバックを登録できる）