How to swipe tabs to change the data?

ionic-v1
1

@mhartington @max
Hi,

   How to swipe the tabs like  swipe to move "One Page" to "Another page"? (google store play - like).   Please help me.

Thank you.

2

HI,

Are you looking for $state.go(STATE_NAME);? And then add swipe event listener on your controller or just define a directive.

3

Yeah. I got it. thank you.

I want to animate movie Images automatically. do you know about this? Can you help me please

4

You may looking for the ionic directive ionic-slide, something like this:

<ion-slide-box>
  <ion-slide>
      <img src="http://lorempixel.com/400/200/sports?1" alt="">
  </ion-slide>
  <ion-slide>
      <img src="http://lorempixel.com/400/200/sports?2" alt="">
  </ion-slide>
  <ion-slide>
      <img src="http://lorempixel.com/400/200/sports?3" alt="">
  </ion-slide>
</ion-slide-box>

Or if you want to swipe to change state, you can do something like this:

var app = angular.module('YOUR_APP', []);

app.directive('swipeToState', ['$state', function ($state) {
  return {
    restrict: 'A',
    scope: {
      swipeToState: '@'
    },
    link: function (scope, iEle, iAttrs) {
      // `swipe` is one of gestures which ionic supports,
      // more event types in http://ionicframework.com/docs/nightly/api/utility/ionic.EventController/#onGesture
      iEle.on('swipe', function () {
        $state.go(scope.swipeToState);
      });
    }
  };
}]);

Just add this directive to the element you want to listen after define the swipeToState directive, e.g.

<!-- `app.productList` is the state you have defined in your `app.config()` -->
<body swipe-to-state="app.productList">
  <!-- ... -->
</body>

That’s all I know about this question, hope this can help you :smile:

1 Like
5

I agree with you @santinowu :smile:

From above code we have to swipe images. But i don’t need that requirement. I want to animate images automatically. For ex. In play store newest app screens automatically swiping.

Thank you.

sorry for my English Language. :wink:

6

Then you have to use

<ion-slide-box does-continue="true" auto-play="true"> ...

Check the pen http://codepen.io/ionic/pen/AjgEB

7

Well @vicmota Thank you :smile:

But 1st image moving automatically. from second onwards images not moving to further images.

8

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