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!