flipsnap.jsはフリックによるページャーを実装するための軽量なjavascrpt pluginです。
ドキュメントも簡潔で、とても使いやすい。
ですが、フリックで表示ページを変更後した時のイベントで、表示ページ番号を取得する方法が公式ドキュメントに書かれていなかったので覚書。
var flipsnap = Flipsnap('.flipsnap');
// フリックではなく、前/次表示をボタンでもする
$('prev_button').on('click', function(){ flipsnap.toPrev(); });
$('next_button').on('click', function(){ flipsnap.toNext(); });
// フリック後のイベント定義。toPrev/toNextによるページ移動時には**発火しない**
flipsnap.element.addEventListener('fstouchend', function(ev) {
ev.newPoint; //=> 移動後の表示ページ番号
},false);
// ページ移動後のイベント定義。toPrev/toNextによるページ移動時にも**発火する**
flipsnap.element.addEventListener('fspointmove', function(en) {
ev.newPoint; //=> undefined
flipsnap.currentPoint // 表示ページ番号
}, false);
// 主なプロパティ
flipsnap.currentPoint // 表示ページ番号(0..)
flipsnap.maxPoint // 最終ページ番号
flipsnap.animation // フリック時のアニメ表示(true/false)
flipsnap.transitionDuration // アニメの早さ(default 350ms)。再設定可能
補足:以下のようなページを想定。
page.haml
.viewport
.flipsnap
.item page 1
.item page 2
.item page 3
.item page 4
.item page 5
page.sass
$view-width: 320px
$item-border-bold: 5px
.viewport
width: $view-width
overflow: hidden
margin: 0 auto
.flipsnap
width: $view-width * 5
.item
float: left
width: $view-width - $item-border-bold * 2
text-align: center
padding: 50px 0
border: $item-border-bold solid #999