向左/向右滑动用户媒体卡以显示下一个

Question

I am trying to implement a widget which ng-repeats user media objects horizontally and I should be able to swipe left/right to reveal the next media card. widget should look something like this

As you can see the image

The next card avatar is half visible, hinting there are more cards to swipe.

this is all i have currently.. i am stuck here

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>

heres the plunker http://plnkr.co/edit/YESgpGIXQrK9sYl79FVI?p=preview

Answer 1

Here is a plunkr with a working implementation.

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

I added ngTouch and in the HTML a ng-class and the touch event handlers.

  <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()">

And in the MainController, it flips through active item by assigning a current class to it, and a next-up and previous class to the neighbors.

$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;
    };
  };
};

Only needs a better handling of the boundaries.