Ion-slide inside ion-tab does not work


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

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


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

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?

Ion-slides not working in the first tab

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…


i sort of worked around the issue by actually not using the ion-slide but used original plugin that ion-slide uses:

declare var Swiper: any;
ionViewDidEnter() {

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

    <!-- 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>