Swipeable Tabbed Views (make tabbed template swipeable)

It’s been a while I have been trying to make the standard tabbed template swipeable.

This is the tabs part in the template (implementing tabbed views):

<!-- Views/Tabs container -->
<div class="views tabs safe-areas">
  <!-- Tabbar for switching views-tabs -->
  <div class="toolbar toolbar-bottom tabbar-labels">
    <div class="toolbar-inner">
      <a href="#view-home" class="tab-link tab-link-active">
        <i class="icon f7-icons if-not-md">house_fill</i>
        <i class="icon material-icons if-md">home</i>
        <span class="tabbar-label">Home</span>
      </a>
      <a href="#view-catalog" class="tab-link">
        <i class="icon f7-icons if-not-md">square_list_fill</i>
        <i class="icon material-icons if-md">view_list</i>
        <span class="tabbar-label">Catalog</span>
      </a>
      <a href="#view-settings" class="tab-link">
        <i class="icon f7-icons if-not-md">gear</i>
        <i class="icon material-icons if-md">settings</i>
        <span class="tabbar-label">Settings</span>
      </a>
    </div>
  </div>

  <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
  <div id="view-home" class="view view-main view-init tab tab-active" data-url="/">
    <!-- Home page will be loaded here dynamically from / route -->
  </div>

  <!-- Catalog View -->
  <div id="view-catalog" class="view view-init tab" data-view="catalog" data-url="/catalog/">
    <!-- Catalog page will be loaded here dynamically from /catalog/ route -->
  </div>

  <!-- Settings View -->
  <div id="view-settings" class="view view-init tab" data-view="settings" data-url="/settings/">
    <!-- Settings page will be loaded here dynamically from /settings/ route -->
  </div>
</div>

I would like to make it swipeable, but adding the swipeable wrapper outside this block does not work. I have also tried many other combinations with no success. How should you proceed in this case?

<div class="tabs-swipeable-wrap"></div>

Hi shastox,

thanks for your reply.

I have tried the structure suggested in your URL, and with “.tabs-animated-wrap” it does work (transitions happen changing the tabs using the tabbar), while changing it with “.tabs-swipeable-wrap” does not work, and it does even break the tab system (tabbar does no longer change the views in the tabs).

Could it have to do with the swipe being received into the view and not by the swiper?