Ionic 7 Swipe Tabs With Vanilla JS

Ionic Framework
1

Hi,

I’m using Ionic 7 (vanilla, no Angular/React router) and want to implement swipeable tabs — where swiping changes the tab content and clicking a tab moves to the corresponding slide.

I don’t need routing, just slide + tab sync with ion-tab-bar.

Older solutions use ion-slide-box (Ionic 1), which doesn’t work in Ionic 7.

What’s the recommended modern approach for this in Ionic 7? Should I use Swiper directly or is there an official pattern?

Thanks!

Code Below

 <ion-tabs>
              <ion-tab tab="Home">
                  <div id="home-page" class="ion-page">
                  <ion-content>
                  <home-page></home-page>
                  </ion-content>
                  </div>
              </ion-tab>
                 <ion-tab tab="Account">
                  <div id="account-page" class="ion-page">
                  <ion-content>
                  <accounts-page></accounts-page>
                  </ion-content>
                  </div>
              </ion-tab>
                 <ion-tab tab="Settings">
                  <div id="test-page" class="ion-page">
                  <ion-content>
                  <settings-page></settings-page>
                  </ion-content>
                  </div>
              </ion-tab>

          <ion-tab-bar slot="bottom">
          <ion-tab-button tab="Home">
          <ion-icon name="home"></ion-icon>
           Home
          
          </ion-tab-button>
         <ion-tab-button tab="Account">
          <ion-icon name="person-circle-sharp"></ion-icon>
          Account
          </ion-tab-button>
           <ion-tab-button tab="Settings">
          <ion-icon name="Settings"></ion-icon>
          Settings
          </ion-tab-button>
          </ion-tab-bar>

        </ion-tabs>
2

use ion-segment and style it like a tab bar: ion-segment: API Documentation for Segmented Controls

1 Like
3

Hi, thanks for the response will check this out!