Is it possible to swipe tabs (if possible, with loop) with tabbar, where each tab is a view?

Hello dear community! I have examined documentation of framework well, but I cannot make work the following case:

  1. We have tab bar, in which some tabs names, icons are located;
  2. Below tab bar we have tabs wrapper, inside which each tab is a separate view;
  3. 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:

  1. Show direction, some example how can I loop tabs?
  2. 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!

1 Like