This was working in 2.0.0-rc.4, but in 2.0.0 (Woohooo!) it does not seem to be possible to place a Vertical Slides within a Horizontal Slides and get both to slide.
The issue
Now, in the final release, the slide (via swipe) is only honoured for the inner Slides (vertically). It seems like this could be that the outer (horizontal) Slides’ swipe gestures are being ignored…
The code
Here’s the code. There is an outer Slides with options set to slide “horizontal” and an Inner Slides set to slide “vertical”.
<ion-slides class="suit-slider" #SuitSlider [direction]="horizontal" [pager]="false">
<!-- suit 1-->
<ion-slide>
<ion-slides #CardSlider1 [direction]="vertical" [pager]="false">
<ion-slide>
<div class="lrn-card">
<h2>Card one</h2>
</div>
</ion-slide>
<ion-slide>
<div class="lrn-card">
<h2>Card two</h2>
</div>
</ion-slide>
</ion-slides>
</ion-slide><!-- end suit 1 -->
<!-- suit 2 -->
<ion-slide>
<ion-slides #CardSlider2 (ionSlideDidChange)="onCardChanged()" [direction]="vertical" [pager]="false">
<ion-slide>
<div class="lrn-card">
<h2>Card one</h2>
</div>
</ion-slide>
<ion-slide>
<div class="lrn-card">
<h2>Card two</h2>
</div>
</ion-slide>
</ion-slides>
</ion-slide><!-- end suit 2 -->
<!-- suit 3 -->
<ion-slide>
<ion-slides #CardSlider3 (ionSlideDidChange)="onCardChanged()" [direction]="vertical" [pager]="false">
<ion-slide>
<div class="lrn-card">
<h2>Card one</h2>
</div>
</ion-slide>
<ion-slide>
<div class="lrn-card">
<h2>Card two</h2>
</div>
</ion-slide>
</ion-slides>
</ion-slide><!-- end suit 3 -->
</ion-slides>
Any thoughts on this on whether this is still possible in Ionic 2.0.0. Final?