How to show Pages instead of slide in Swipeable Tabs using segments and Slides

Ionic Framework ionic-v3
1

Hi there i made swipeable tabs with segments and slides out of blank project, Instead of Slide how can of Show desired page, for instance i have Three tabs in the first tab want to show List view and in second tab scroll able image gallery and in third tab images and Text with buttons. How to achieve this inside slide? so is there a way to show pages upon slide or instead of slide.
Hope you guys will help have a great day.
Here is the home.html

<ion-header>
  <ion-navbar>
    <ion-title color="dark">
      Test App
    </ion-title>
  </ion-navbar>

  <ion-segment color="dark" [(ngModel)]="page">
    <ion-segment-button value="0" (click)="selectedTab(0)"> 
      FirstTab
    </ion-segment-button>
    <ion-segment-button value="1" (click)="selectedTab(1)">
      SecondTab
    </ion-segment-button>
    <ion-segment-button value="2" (click)="selectedTab(2)">
      ThirdTab
    
  </ion-segment>

</ion-header>

<ion-content padding>
  
  <ion-slides #slider (ionSlideWillChange)="moveButton($event)">

  <ion-slide>

    <h1>First Slide</h1>
  </ion-slide>

  <ion-slide>
    <h1>Second Slide</h1>
  </ion-slide>

  <ion-slide>
    <h1>Third Slide</h1>
  </ion-slide>

  

  </ion-slides>
</ion-content>

And here is the home.ts

import { Component, ViewChild } from '@angular/core';
import { NavController, NavParams, Slides } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild('slider') slider: Slides;
  page="0"

  constructor(public navCtrl: NavController, public naveParama: NavParams) {

  }

  selectedTab(ind){
    this.slider.slideTo(ind);
  }


  moveButton($event) {
    this.page = $event._snapIndex.toString();
  }

}

And here is the app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Hope you guys will help Thank you in advance.

2

hey there
I just ran into a similar problem and had initially tried adding <ion-nav [root]="pageOne"> within each <ion-slide> but that was giving me some formatting/styling problems, and trouble accessing child elements within the pages.

After some searching I was able to use the component selector from the desired “tab” pages inside each <ion-slide> and <ng-content> for each “tab” template.

I am using FABs at the bottom of my screen instead of tabs or segment buttons but you can call the same methods on your specific event bindings.


Please let me know how this worked for you!

**Sidenote: check out Ionic Super Tabs - Zyra for a MUCH MORE sophisticated implementation for what you are looking for.

page-one.ts / page-two.ts / … (“tab” pages)

import { Component } from '@angular/core';
...

@Component({
selector: 'page-one', //EXAMPLE
template:
`<ng-content></ng-content>`
)}
export class PageOne {
constructor()
}


tabs.html

<!-- PRECEDING HTML -->
<ion-slides
#slider
[options]="slideOptions">
<ion-slide>
<page-one>

<ion-content> (must include for ionic page attributes)
<!--desired page content goes here-->
<ion-list>
<ion-item>
</ion-item>
<!--YOUR_ITEM_CONTENT -->
</ion-list>
</ion-content>
</page-one>
</ion-slide>

<ion-slide>
<page-two>
<ion-content>
<!--NEXT SLIDE CONTENT -->
</ion-content>
</page-two>
</ion-slide>

</ion-slides>



tabs.ts

import { Component, ViewChild } from '@angular/core';

import { NavController, NavParams, Slides } from 'ionic-angular';

@Component({
selector: page-tabs',
templateUrl: 'tabs.html'
})
export class TabsPage {

@ViewChild('slider')
slides: Slides;

slideOptions: any = {
pager: false, //show pager icon
centeredSlides: false, //vertical alignment, defaults to TRUE, if slide is not full screen height
initialSlide: 0, //instead of "page" variable, ion-slides has a property for that
//SEE ION-SLIDES DOCS FOR MORE OPTION PARAMETERS
};

constructor(private navCtrl: NavController, private navParams: NavParams) {}

/**YOUR selectedTab() and moveButton() METHODS SHOULD REMAIN FUNCTIONAL**/

}

3

Hi there,
Thank you for your reply as you said i found a great tutorial about super tabs and it worked great for me and you can give it a try here is the link

Hope it might help you some how thanks to Simon Grimm creator of tutorial.
Have a great day.