Hide show ion-slide-box

1

Hello team.

I have two “ion-slide-box” and two buttons on my page. On page load only the first ion-slide-box is visible. When I click on button #2, the second ion-slide-box should get visible and hide the first ion-slide-box and vice-versa.

I am applying display: none; to the second ion-slide-box initially and then apply display: block; when I click on the button on my page. At that time the second ion-slide-box appears broken with all slides being displayed overlapping each other.

See attached images for details.
Image #1: first page load - Only first slider is visible

Image #2: onclick - When clicked on button “Two” the second slider is visible but distorted.

How do I overcome this?

Regards
Shreerang
Spatial Unlimited

2

Set dimensions of your slides in css.

3

@Maxim applying width to ion-slide is not helping. I have tried that!

4

@mhartington any help?

5

Can you put together a codepen or plunker?

6

if many ion-slide
$ionicSlideBoxDelegate.$getByHandle(your-handle-name).update(); in your controller

Or
If you have one ion-slide
$ionicSlideBoxDelegate.update(); in your controller

7

Hey…Do you get any solution for this problem …Because i am also facing the same problem…?