Swipe navigation for ion-tabs (for ionic framework v 1.0.0)

ion-tabs-swipable.js

angular.module('yourModule')
.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));
				}
			};
		    
		    var swipeGesture = $ionicGesture.on('swipeleft', onSwipeLeft, elm).on('swiperight', onSwipeRight);
		    scope.$on('$destroy', function() {
		        $ionicGesture.off(swipeGesture, 'swipeleft', onSwipeLeft);
		        $ionicGesture.off(swipeGesture, 'swiperight', onSwipeRight);
		    });
		}
	};
}]);

It's work, but not make a slide effect.

Wow, thats work. How can we make it more smooth like android viewpager. Any one have idea for this.

Yes it is worked for me but animation is blinking while swiping.

its working fine.. but no animation.. how to add slide animation

Since I see an ion-tabs and ion-slide-box module in a project of mine, I'm going to try to combine the two to have swipe tab support. Wish me luck.

Any luck? @abegit

How can I add animation in the transition ?

for any body struggling with this I worked around the problem using a watcher on the selected index and then a "reverse" css style on ng-class:

js:

$scope.previousTab = 0;
$scope.currentTab = 0;
$scope.$watch(function() {return $ionicTabsDelegate.selectedIndex();}, function(index) {
      $scope.previousTab = $scope.currentTab;
      $scope.currentTab = index;
});

html:
<ion-tabs tabs-swipable class="tabs-positive slide-left-right" ng-class="{reverse: currentTab < previousTab}">

hope this helps someone else out.

Here is a starter template with the above gist. Would try to add animation. Contributions are welcome

https://github.com/SrijithRad/ionic-swipeable-tabs-demo

In case someone else is looking for animated tabs or swipable tabs, i just created a directive (inspired by @SrijithRad ) for that matter.
just give it a try, GitHub repository.