Svelte Swipeable Tabbed Views (make tabbed template swipeable)

I am using code as below to initialized application.

<App params={ f7params }>
    <Views tabs class="safe-areas">
      <Toolbar tabbar labels bottom >
        <Link tabLink="#view-home" tabLinkActive iconIos="f7:house_fill" iconMd="material:home" text="Home" />
        <Link tabLink="#view-category" iconIos="f7:square_list_fill" iconMd="material:view_list" text="Categories" />
        <Link tabLink="#view-favorite" iconIos="f7:heart_fill" iconMd="material:favorite" text="Favorites" />
      </Toolbar>
      <View id="view-home" main tab tabActive url="/" />
      <View id="view-category" tab url="/category/" />
      <View id="view-favorite" tab url="/favorite/" onTabShow={fav} />
    </Views>
</App>

We want Swipeable Tabs on this Toolbar as like Instagram.

I have checked below swipeable tabs demo but that’s on simple tabs.
https://framework7.io/svelte/tabs.html#swipeable-tabs

So how can I implement swipeable views?

I got answer from GitHub issue but that is not working.

And i have posted you a link to solution there to Swipeable Tabbed Views (make tabbed template swipeable) If it doesn’t work, what have you tried? I can’t see you tried to apply something from there in your posted code

My Code for svelte is:

app.svelte

<App params={ f7params }>
    <Views tabs class="safe-areas tabs-swipeable-wrap swiper-container">
      <!-- Tabbar for switching views-tabs -->
      <Toolbar tabbar labels bottom>
        <Link tabLink="#view-home" tabLinkActive iconIos="f7:house_fill" iconMd="material:home" text="Home" />
        <Link tabLink="#view-category" iconIos="f7:square_list_fill" iconMd="material:view_list" text="Categories" />
        <Link tabLink="#view-favorite" iconIos="f7:heart_fill" iconMd="material:favorite" text="Favorites" />
      </Toolbar>
      <div class="swiper-wrapper tabs">
        <View id="view-home" main tab tabActive url="/" />
        <View id="view-category" tab url="/category/" />
        <View id="view-favorite" tab url="/favorite/"/>
      </div>
    </Views>
</App>
<script>
  import {onMount} from 'svelte';
  import {Device} from 'framework7/framework7-lite.esm.bundle.js';
  import {
    f7,f7ready,App,Panel,Views,View,Popup,Page,Navbar,Toolbar,NavRight,Block,Link,TabLink
  } from 'framework7-svelte';
  import cordovaApp from '../js/cordova-app';
  import routes from '../js/routes';

  // Framework7 Parameters
  let f7params = {
    id: config.package_name,
    name: config.app_name,
    theme: 'auto',
    // App routes
    routes: routes,
    input: {
      scrollIntoViewOnFocus: Device.cordova && !Device.electron,
      scrollIntoViewCentered: Device.cordova && !Device.electron,
    },
    statusbar: {
      iosOverlaysWebView: true,
      androidOverlaysWebView: false,
      scrollTopOnClick: false,
    },
    navbar: {
      scrollTopOnTitleClick: false
    },
    view: {
      stackPages: true,
      unloadTabContent: false,
    }
  };
  onMount(() => {
    f7ready(() => {
      // Create Views Swiper manually
      const viewsSwiper = f7.swiper.create('.views', {
        on: {
          slideChange() {
            const swiper = this;
            const id = swiper.slides.eq(swiper.activeIndex).attr('id');
            f7.tab.show(`#${id}`);
          }
        }
      });
      f7.on('tabShow', (tabEl) => {
        if (f7.$(tabEl).hasClass('view')) {
          viewsSwiper.slideTo(f7.$(tabEl).index());
        }
      });

      // Init cordova APIs (see cordova-app.js)
      if (Device.cordova) {
        cordovaApp.init(f7);
      } 
    });
  })
</script>

After adding this code, i am just watching bottom toolbar and swiper is initialised but its not visible on routable page.

Inspect code is here:

Remove tabs property from Views:

<Views class="safe-areas tabs-swipeable-wrap swiper-container">

After removing tabs property, there is a no effect, still getting same output.
check inspect element screenshot.

You also missing swiper-slide class on every View, like <View class="swiper-slide" ...

Thank You
Its working now.

When added slider on routable tabs, then it will create an issue on for current view assignment and automatically it will create many empty views.

On below log screen, I have added only 5 views on routable tabs but it will display many and on f7.views.current nothing will assign.

I think, its critical when routable tabs and user want to get their current active view for navigate or got information for current active page.

For anyhow I got the current view when routable tabs and i have bypassed these things.

But I think it will be helped to other users who suffer from this if we get the current view from f7.views.current.