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?