Hammer.jsでCarouselをスワイプできるようにする

先日大幅に改修したMSの公式サイトと揶揄されている私の個人サイトである xin9le.net。そこには Carousel と呼ばれるものがあります。いわゆるクルクルと画面が遷移する広告みたいなヤツです。

xin9le.net top

サイト自体のデザインにはかなり気を配ったし、流行りのレスポンシブなデザインにもしてスマホでも綺麗に表示されるように調整しました。いろいろ頑張ったつもりだったのですが、公開後 @mitsuba_tan にこんなことを言われました。

new CSharper();のとこ

まるちょぼはあるのに、つついてもうごかないし、フリックしても次みれないんや、、、っておもった（

実際丸チョボは動きますが、確かにフリックというかスワイプ操作では動きませんでした。で、「自分のサイトはできるでッ(ﾌﾌﾝ」と言われて悔しくなって (？) 対応してみました。

Hammer.js

デスクトップアプリだったらタッチ操作はメッセージをフックすれば比較的簡単に取れそうですが、Web サイトでどうやったらスワイプを検知できるのかと悩みました。でも「どーせそういうライブラリあるんでしょ？」と検索してみると、やっぱり結構あるんですね。

今回はこの中で Hammer.js というのを使って対応してみました。今回メインで使用するスワイプだけでなく、いろんなイベントが取れるようです。

実装例

言わずもがなかもしれませんが、私のサイトは「Bootstrap臭」と揶揄される、いわゆるデザインができないエンジニアのための最強ライブラリの Twitter Bootstrap が使われています。Carousel 部分のエッセンスを取り出すと以下のような感じです。

<div id="carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
    </ol>
        <div class="item active">
            1枚目のスライド
        </div>
        <div class="item">
            2枚目のスライド
        </div>
    </div>
</div>

これに対して JavaScript でスワイプの制御をするわけですが、そっちは大体以下のような実装をしています。

$(function()
{
    var carousel = $('#carousel');
    var hammer = new Hammer(carousel[0]);
    hammer.on('swipeleft', function(){ carousel.carousel('next'); });   //--- 左にスワイプしたら次の画像に切り替え
    hammer.on('swiperight', function(){ carousel.carousel('prev'); });  //--- 右にスワイプしたら前の画像に切り替え
});

実装は非常に簡単で、スワイプのターゲット要素を取得してそれに対する Hammer インスタンスを生成します。あとは生成した Hammer インスタンスに左右のスワイプ操作のイベントを関連付けて終了です。今回は左方向へのスワイプで次のスライドに、右方向へのスワイプで前のスライドに切り替わるようにしています。たったこれだけですが、タッチ操作だけでなくマウスでの切り替えにも対応しています。とてもお手軽で捗りますね！

みなさんも Carousel を使うことがあればスワイプに対応しましょう！