AngularJSのngSwipeLeftでスマホのカルーセル移動処理を簡単追加

カルーセルにng-swipe-leftを追加

AngularJSはng-swipe-leftを使用すれば左スワイプのイベントを簡単に検出できるのでカルーセルに組み合わせれば左スワイプで次に進める処理が簡単にできる。

※ AngularJSを使用するので下記の2つのファイルの読み込む
※ ng-appとng-controllerの設定も忘れずに

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-touch.min.js

1. スワイプする箇所にng-swipe-left="swipeLeft()"を追加する

<div id="carousel" ng-swipe-left="swipeLeft()">
  <ul id="carouselInner"><li class="c1">carousel1</li><li class="c2">carousel2</li><li class="c3">carousel3</li></ul>
</div>

2. スワイプ時のアニメーションのCSSを記述する

#carousel li.move {
  -webkit-animation: carousel 0.5s ease;
}
@-webkit-keyframes carousel {
  0% { -webkit-transform: translate3d(0px, 0px, 0px) }
  100% { -webkit-transform: translate3d(-300px, 0px, 0px) }
}

3. JavaScriptで左スワイプ発生時にCSSの.moveが追加・削除されるようにする

var app = angular.module('myApp', ['ngTouch']);
app.controller('Ctrl', ['$scope', function ($scope) {
  var li = document.querySelectorAll("#carousel li");
  var carouselInner = document.getElementById("carouselInner");
  var moveLi = li[0];
  var movePos = 0;
  var moveFlag = false;
  var moveLeft = function () {
    if(moveFlag === false) {
      moveFlag = true;
      for(var i=0; i < li.length; i++) {
        angular.element(li[i]).addClass("move");
      }
      var liMove = document.querySelectorAll("li.move")[0];
      liMove.addEventListener("webkitAnimationEnd", function swipeAnimate () {
        liMove.removeEventListener("webkitAnimationEnd", swipeAnimate, false);
        var trans = "translate3d(0px, 0px, 0px)";
        for(var i=0, len=li.length; i < len; i++) {
          angular.element(li[i]).removeClass("move");
          angular.element(li[i]).css('-webkit-transform', trans);
        }
        carouselInner.appendChild(moveLi);
        movePos = (movePos >= (len - 1)) ? 0 : movePos + 1;
        moveLi = li[movePos];
        moveFlag = false;
      }, false);
    }
  };
  $scope.swipeLeft = moveLeft;

AngularJSのngSwipeLeftでカルーセルの移動処理追加サンプル

補足

• 右スワイプの処理も加えたい場合はngSwipeRight
• 一定時間毎に移動させる場合は$intervalを併用
• liタグにdisplay-inlineを適用しているので改行があると余分な余白が表示されます
• カルーセルのliの数が固定でない場合はli.lenghから幅などを算出して可変で運用できるようにする