Ionic 2 final and Slides component within a Slides component

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?

I have noticed the same in 2.0.0. Even pagination with [pager]="true" gets mixed when nested, but it worked in 2.0.0-rc.4.

Have you found a way in the meantime, @nebrekab?

@dtslvr - Sadly no… I am sticking with RC4 for now and keeping an eye on the new releases of Ionic to see if this is fixed.

It may be that we need to write our own Slides component for our app going forward, to achieve what we want.

@brandyshea, I think you wrote the tutorial/examples on the Slides component, any ideas on this? If I setup a Plunker would you be able to offer any advice?

Could you create an issue for this on our repository with the plunker and tag me in it? :slight_smile:

Hi @brandyshea, thanks for getting back to this - you rock. :slight_smile:

Here’s an example of it working in RC4: http://plnkr.co/edit/vBSifSBHzjDp4hkFG7VR?p=preview

There is a bit of CSS set in the index.html to get this to play ball.

Any ideas how this same thing can be achieved in 2.0.0 Final+? At the moment the same code (although with the options set via attributes) only allows horizontal sliding.

Oh - I’ll add it to the gihub :wink:

Thanks @nebrekab for your efforts, it seems to help :slight_smile: Can you post the ticket number that I can watch?

Have a nice weekend,
Thomas

Sure @dtslvr, you can find the ticket here: https://github.com/driftyco/ionic/issues/10542

No fix as yet.

1 Like