How to add swipe to change between tabs - angularjs-directive

Question

I am working on a html5 mobile app project. I found that Onsen ui is very use full and started working on It .
Now I want to swipe between tabs like native android ui .please help
I made tab as this
<ons-tabbar position="top" >
<ons-tab page="page1.html" label="Mobile" active="true"></ons-tab>
<ons-tab page="page2.html" label="DTH"></ons-tab>
<ons-tab page="page3.html" label="Datacard"></ons-tab>
</ons-tabbar>
But how to add swipe to change between tabs.

Answer 1

Onsen UI doesn't have this feature. It includes the Hammer library to detect gestures, so you could listen to the drag event and switch tabs when the user drags left and right.
Something like this:
document.addEventListener('ons-tabbar:init', function(event) {
var tabbar = event.component,
el = tabbar._element[0],
nbrOfTabs = 4;
var hammer = new Hammer(el);
// Bind some events
hammer.on('drag', function(event) {
var dx = event.gesture.deltaX,
idx = tabbar.getActiveTabIndex(),
th = el.getBoundingClientRect().width / 2;
if (dx > th && idx !== -1) {
event.gesture.stopDetect();
tabbar.setActiveTab(Math.max(idx - 1, 0));
}
else if (dx < -th && idx !== -1) {
event.gesture.stopDetect();
tabbar.setActiveTab(Math.min(idx + 1, nbrOfTabs - 1));
}
});
});
http://codepen.io/argelius/pen/vELYaK