アイテムベースのスクロールとナビゲーションを実装できる Slyの使い方
Sly http://darsa.in/sly/
HTMLの構造はこうなっている
FRAME、SLIDEE、CONTENT ITEMSの関係を理解する
横スクロールのサンプルページ
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以下に入れている）
[HTML]
</p>
One item per frame
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15 </ul></div>
</p></div> </p></div>
</body></html>
[/HTML]
horizontal.js 抜粋
FLAMEとして使うオブジェクトの指定やオプションの設定を行っている。
オプション一覧はこちら
https://github.com/Darsain/sly/wiki/Options
[JavaScript]
// ————————————————————-
// 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’)
});
}());
[/JavaScript]
horizontal.css 抜粋
[CSS]
/* One Item Per Frame example*/
.oneperframe { height: 300px; line-height: 300px; }
.oneperframe ul li { width: 1140px; }
.oneperframe ul li.active { background: #333; }
[/CSS]
スクロールバーやボタンの見た目もこのCSSで設定しているので、見た目を変えたい時は変更する
参照
Slyオブジェクトのプロパティ、メソッド、イベント（コールバックを登録できる）
