Geek Answers Handbook

Swipe left / right on user map to open next

I am trying to implement a widget that has ng-repeatscustom media objects horizontally, and I should be able to scroll left / right to open the next multimedia card. the widget should look something like this.

As you can see the image

The next card avatar is half visible, hinting that there are more cards to scroll through.

That's all I have at present .. I'm 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 plunker http://plnkr.co/edit/YESgpGIXQrK9sYl79FVI?p=preview

+4
source share
1 answer

Here is the bar with a working implementation.

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

ngTouch HTML a 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()">

MainController , 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;
    };
  };
};

.

+2

More articles:


All Articles