Ion Slide Overflow - ionic-framework

Question

I am using ion-slide and transforming my image on second slide zooming IN and OUT and it overflows on my main slide.
Here's my main slide and the second slide is overflowing:
HTML:
<ion-content>
<ion-slides>
<ion-slide class="slide-main">
<ion-grid>
<ion-row class="row-main">
<img class="img-main" src="https://cdopromos.com/wp-content/uploads/2019/07/maxs-restaurant-chicken-all-you-can.jpg">
</ion-row>
</ion-grid>
</ion-slide>
<ion-slide class="slide-secondaruy">
<ion-grid>
<ion-row class="row-secondary">
<img class="img-secondary" src="https://lh3.googleusercontent.com/proxy/iP2XG4WiD4Q2U18hRlCG9375ujydwARovLR8R6HrMLVp3iyH5pteC7RHOivfo3_njckHJyN21we1qmrbc7F3Bc2ao7UyCsMeMh6AGdt4v8loHSu51bHtOEC69e7HedDHrX3A9HRnKDg">
</ion-row>
</ion-grid>
</ion-slide>
</ion-slides>
</ion-content>
CSS:
.row-main{
height: 100vh;
width: 100vw;
}
*{
padding: 0;
}
.img-secondary{
height: 100vh;
transform: scale(1);
animation: zoominout 30s infinite ;
}
.img-main{
}
.row-secondary{
z-index: -1;
}
.swiper-slide{
z-index: -1;
}
#keyframes zoominout {
0% {
transform: scale(1,1);
}
50% {
transform: scale(1.2,1.2);
}
100% {
transform: scale(1,1);
}
}
.slide-main{
z-index: 99;
}
I used z-index and overflow-x:hidden but nothing happened

Answer 1

I'm not sure if using the <ion-grid> is necessary, but if you structure your template code like this it let's the default layout in <ion-slide> structure your content.
html
<ion-content>
<ion-slides>
<ion-slide class="slide-main">
<img class="img-main" src="https://cdopromos.com/wp-content/uploads/2019/07/maxs-restaurant-chicken-all-you-can.jpg">
</ion-slide>
<ion-slide class="slide-secondary">
<img class="img-secondary" src="https://images.pexels.com/photos/2397361/pexels-photo-2397361.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500">
</ion-slide>
</ion-slides>
</ion-content>
In your scss of the component go ahead and tell the <ion-slide> to hide anything outside of its containing boundary.
/**
Add this to your scss
*/
ion-slide {
overflow-x: hidden!important; // or overflow: hidden or overflow-y: hidden
}
/**
Add this to your scss
*/
.row-main{
height: 100vh;
width: 100vw;
}
*{
padding: 0;
}
.img-secondary{
height: 100vh;
transform: scale(1);
animation: zoominout 30s infinite ;
}
.img-main{
}
.row-secondary{
z-index: -1;
}
.swiper-slide{
z-index: -1;
}
#keyframes zoominout {
0% {
transform: scale(1,1);
}
50% {
transform: scale(1.2,1.2);
}
100% {
transform: scale(1,1);
}
}
.slide-main{
z-index: 99;
}
The end result looks like this.