Hello dear community! I have examined documentation of framework well, but I cannot make work the following case:
- We have tab bar, in which some tabs names, icons are located;
- Below tab bar we have tabs wrapper, inside which each tab is a separate view;
- The objective I want to reach is:
3.1. Each view should be shown on swipe. That means I have wrap tabs (all view) into div class=“tabs-swipeable-wrap” wrapper.
3.2. If it is possible, perform loop of tabs. If there are 5 views, after 5th tab swipe next first one should be shown;
3.3. Swipe result should be reflected in let’s say appropriate tab change color (just for example).
I played really long with it, was not able to do it. As I remember, it started failing on wrapping views into tabs-swipeable-wrap container.
What I managed to do is make it work for page-content. here is my structure:
<div class="toolbar tabbar">
<div class="toolbar-inner">
<a href="#tab1" class="button active tab-link">Tab 1</a>
<!-- OTHER ITEMS -->
</div>
</div>
<div class="tabs-swipeable-wrap">
<div class="tabs">
<div id="tab1" class="page-content tab active">
<div class="content-block">
... SOME CONTENT ...
</div>
</div>
<!-- OTHER TABS CONTENT -->
</div>
</div>
</div>
</div>
</div>
Works as needed (without loop for now). I would really appreciate if you could help me in following:
- Show direction, some example how can I loop tabs?
- Show direction where to read/google, or some example of how can I do same result I did with page-content, but for views, where each tab is not page-content, but view.
Thank you in advance!