Multiple ion-slides in one page

Ionic Framework ionic-v3
1

I have a first ion-slides with effect cube. When i try to add a second ion-slides, the screen is blank. Any help will be much appreciated. Note than if i remove the effect, both slides appear normally and work perfectly.

My code is as per below.

<div class="body-content">
    <ion-slides [effect]='type' [pager]='showPager' *ngIf="employees" class="main-emp-slide" (ionSlideDidChange)="slideChanged()">

      <ion-slide class="ion-slide-main" *ngFor="let employee of employees">
        <table class="employer-details">
          <tr>
            <td>
              <div class="prev-emp"> <button (click)="goToPreviousSlide()"> <ion-icon class="icon-size" name="ios-arrow-back"></ion-icon></button></div>
            </td>
            <td>
              <div class="counter-text">{{pager.currentPage}} out of {{pager.totalPages}} employees</div>
            </td>
            <td>
              <div class="next-emp"> <button (click)="goToNextSlide()"> <ion-icon class="icon-size" name="ios-arrow-forward"></ion-icon></button></div>
            </td>
          </tr>
          <tr>
          <tr>
            <ion-slides pager>
              <ion-slide>
                <h1>slide 1</h1>
              <ion-slide>
              <ion-slide>
                <h1>slide 2</h1>
              <ion-slide>
           </ion-slides>
          </tr>
         </table>
        </ion-slide>
       </ion-slides>
</div>
2

You prob need to check your CSS settings. but sliders dont’ seem to work very well anyways when stacked up on a page.