Ion-slide inside ion-tab does not work

Ionic Framework ionic-v3
1

Hello, ion-slide does not work properly inside an ion-tab.

when ion-slide is added inside a page example:
tab1Root page

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="home">
  <ion-slides>
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
</ion-slides>
</ion-content>

tab page:
<ion-tabs> <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab> </ion-tabs>

I am unable to drag the slidebox to the next slide. if i remove the ion-tab and directly show the slides, it works well.
Even by explicitly calling slideTo() does not work.
However, i noticed if i change the size of the browser several times, then only it works.

Any suggestions please?
Thanks!

2

Noticing the same here on 2.0.0-beta.10. Annoying. Don’t think this was an issue on the previous version but I’d need to check…

3

i sort of worked around the issue by actually not using the ion-slide but used original plugin that ion-slide uses: http://www.idangero.us/swiper/

declare var Swiper: any;
ionViewDidEnter() {
    this.initializeSlider();
  }

  initializeSlider() {
    this.mySwiper = new Swiper('.swiper-container', {
      // Optional parameters
      direction: 'horizontal',
      loop: true
    });
  }

<ion-content>
    <!-- Slider main container -->
    <div class="swiper-container" style="height: 230px;">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
      </div>
    </div>
</ion-content>