Ion-slides insides another ion-slides

Ionic Framework ionic-v3
1

HI. I am trying to include two <ion-slides>, one inside of another like below:

<ion-slides class="parent" direction="horizontal">
     <ion-slide class="move_left_or_right" *ngFor="let item of items">
         <ion-slides class="child" direction="vertical">
             <ion-slide class="move_up_and_down"> {{item}}</ion-slide>
         </ion-slides>
     </ion-slide>      
</ion-slides>

There is a parent which contains <ion-slide> that moves left and right.

Inside of <ion-slide>, it contains child <ion-slides> that also contains <ion-slide> that moves up and down.

I am not having any luck implementing this when *ngFor is involved. Hardcoded works just fine. But somehow *ngFor causes some sort of errors.

Any suggestions?

Thanks!