SlideBox and Navigating to specific slide

1

Hello,

I’m new to the ionic framework and angular. I was wondering if there was a way I can have tabs on top of a “content” area that has “slidebox” nested within so when I click on tab it will show a specific slidebox.

Here an example:

<tabs>
   <tab>Toys</tab>
   <tab>Price</tab>
</tabs>
<ion-slide-box show-pager="false">
   
  <ion-slide>
    <div class="box blue">
        <h1>Toys Content</h1>
    </div>
  </ion-slide>
  <ion-slide>
    <div class="box yellow">
        <h1>Price Content</h1>
    </div>
  </ion-slide>
</ion-slide-box>

So basically I want to click on the “Price” tab and it will show the price slide and the same goes for the other tab.

Any suggestions?

2

I did something similar, but using a button group to select my desired slide index.

If you are building your app in Angular, use this code:

var gotoSlide = function(index) {
  $scope.$broadcast('slideBox.setSlide', index);
}

Call the gotoSlide function, with your desired slide number (index) inside of your tab, and it should work.

Note: the slide index numbers start from 0, 1, 2 … n.

Refer to this for more help:

1 Like
3

I appreciate the response. I will work on it tonight and come back if needed.

Thanks!