ユーザメディアカードを左右にスワイプして次のものを表示する

Question

私は、ユーザメディアオブジェクトを水平に動かすウィジェットを実装しようとしており、次のメディアカードを表示するために左右にスワイプできるはずです。あなたがイメージ

次のカードのアバターをスワイプするより多くのカードがあるヒンティング、半分見えている見ることができるようにウィジェットがこの

ようになるはずです。これは私が現在持っているすべてである

は

..私はここで

div class="media people-card-media col-xs-12" ng-repeat="item in cats"> 
     <div class="media-left "> 
      <div class="person-photo presence" > 
       <img class="media-object list__photo img-circle" ng-src="{{item.photo}}" /> 

      </div> 
     </div> 
     <div class="media-body list__body"> 
      <div class="people_name_title"> 
       <h4 class="media-heading title">{{item.name}}</h4> 

      </div> 
     </div> 
     <div class="media-right media-middle contacts-chat-call flex-it-align-top"> 
      <a style="margin-right: 10px;"> 
       call 
      </a> 

     </div> 
    </div> 

相続人plunker http://plnkr.co/edit/YESgpGIXQrK9sYl79FVI?p=preview

Answer 1

が働い実装とplunkrで、ここで立ち往生しています。

http://plnkr.co/edit/wmIyCFM57hniZQ82Z8Ba?p=preview

私はngTouchを追加し、HTML ng-classとタッチイベントハンドラーインチ

<div class="media people-card-media col-xs-12" 
     ng-class="item.displayClass" 
     ng-repeat="item in heroes" 
     ng-click="gonext()" 
     ng-swipe-left="gonext()" 
     ng-swipe-right="goprev()"> 

そしてメインコントローラには、近隣にまでcurrentクラス、およびnext-upとpreviousクラスを割り当てることによって、アクティブな項目を通って反転。

$scope.gonext = function() { 
    for (var i=0, len=$scope.heroes.length; i<len; i++) { 
    if ($scope.heroes[i].displayClass == 'current') { 
     $scope.heroes[i].displayClass = 'previous'; 
     if (i<len-1) $scope.heroes[i+1].displayClass = 'current'; 
     if (i<len-2) $scope.heroes[i+2].displayClass = 'next-up'; 
     i=len; 
    }; 
    }; 
}; 

境界の処理が必要な場合のみです。