Ion-slide-box with different slide heights

Question

I'm using ion-slide-box, but the issue is, my ion-slides are not in the same height, So it sets all the ion-slides to the size of heights one. Following is an example

• ion-slide 1 height 30px
• ion-slide 2 height 100px

So, ion-slide-box height will be 100px, which make a blank space (70px) in the slide1. And when the user slide by using that blank space (70px), slider doesn't work.

What could be the way/workaround to have the slidebox work for different slide heights?

Answer 1

$ionicScrollDelegate.resize(); did the trick

check this for codepen

Answer 2

You can use flex-box to organize the slides height:

.slider-slides {
   display: flex;
}

Don't forget to reset slides height and all slides will get the biggest height :)

.slider-slide {
   height: auto;
}