FlipSnap.jsで自動再生させるやり方を考えてみた

僕もよくお世話になるスマホ向けスライダープラグイン「FlipSnap」。今回はこのプラグインに自動再生機能をつける必要に迫られたので、やり方をメモしておきます。

FlipSnapとは

主にスマートフォン用のサイトを作るときによく使うスライダープラグインです。jQueryが必要なく、単体軽量で扱いやすいことからよく使う方も多いんじゃないかと思います。
使い方は非常にシンプルで、公式に乗っているチュートリアルが非常にわかりやすいのでリンクだけで割愛します。

flipsnap.js

自動再生機能をつけたい

スマートフォン向けなのでそもそもスライドショーを自動再生にすること自体に意味があるのか？とは重々思うのですが、今回必要に迫られたので、自動再生機能を作ってみました。最後までスライドすると最初に戻る仕様です。自力で書くの面倒なのでjQueryと併用させて実現しました。

出来たコードはこんな感じです。

<script defer src="jquery.js"></script>
<script defer src="flipsnap.js"></script>

//まずFlipsnapを発火させる
var flipsnap = Flipsnap(‘#flipsnap');
//スライドの枚数を入れる
var cnount=5;
//スライドする間隔時間を設定
var time=3000;

//タイマー用の関数を作る
function startTimer(){
flipTimer=setInterval(function(){
flipsnap.toNext();
if (flipcount>count) {
flipsnap.moveToPoint(0);
};
} , time);
}

//タイマーを止める関数
function stopTimer(){
clearInterval(flipTimer);
}

//自動再生ボタンをクリックしたときのイベント
$(“a.autoplay”).toggle(
function () { startTimer(); },
function () { stopTimer(); }
);

setIntervalで一定時間に次へめくる挙動を繰り返しているだけの単純構造です。何かもっと良い方法ある方は教えていただければ嬉しいです！

ちなみに、ボタンイベント作るのが面倒でjQueryを入れてFlipsnapの軽量というメリットを相殺してしまいましたが、ボタンイベントも生のJSだけで書けば軽量になるかと…。

Web制作の現場で使う jQueryデザイン入門［改訂新版] (アスキー書籍)
ー Amazon.co.jpで買う