11
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

flipsnap.jsで表示中のページ数を取得

Posted at

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
11
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?