Swipe Tabs and Slide Effect


#1

Hello, i’m using this code for swipe my tabs, and it’s work, but don’t make effect slide.
I would like to do the slide effect in the application, how to do this.

meuapp.directive('tabsSwipable', ['$ionicGesture', function($ionicGesture){
  //
  // make ionTabs swipable. leftswipe -> nextTab, rightswipe -> prevTab
  // Usage: just add this as an attribute in the ionTabs tag
  // <ion-tabs tabs-swipable> ... </ion-tabs>
  //
  return {
    restrict: 'A',
    require: 'ionTabs',
    link: function(scope, elm, attrs, tabsCtrl){
      var onSwipeLeft = function(){
        var target = tabsCtrl.selectedIndex() + 1;
        if(target < tabsCtrl.tabs.length){
          scope.$apply(tabsCtrl.select(target));
        }
      };
      var onSwipeRight = function(){
        var target = tabsCtrl.selectedIndex() - 1;
        if(target >= 0){
          scope.$apply(tabsCtrl.select(target));
        }
      };
        //$ionicGesture.on('swipe', scope.reportEvent, elem);
        var swipeGesture = $ionicGesture.on('swipeleft', onSwipeLeft, elm).on('swiperight', onSwipeRight);
        scope.$on('$destroy', function() {
            $ionicGesture.on(swipeGesture, 'swipeleft', onSwipeLeft);
            $ionicGesture.on(swipeGesture, 'swiperight', onSwipeRight);
        });
    }
  };
}]);

#2

In case someone else still looking for this feature, i just created a directive for that matter.
just give it a try, GitHub repository.