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?

Solution 1

You can use this :

.slider-slides{
  display: flex;
  flex-direction: row;
}

Solution 2

If you want a fixed height slider with every slides filling the slider height without leaving any blank space, In style.css add these lines:

.slider {
height: 200px; /* slider height you want */
}
.slider-slide {
 color: #000;
 background-color: #fff;
 height: 100%;
} 

Solution 3

$ionicScrollDelegate.resize(); did the trick

check this for codepen

Solution 4

strong text if you are using ionic 2 than add a scss.

 .slide-zoom {
  height: 100%;
  }

and import this class in

<ion-content class=slide-zoom>
   <ion-slides>

   <ion-slide>
 ..............
     </ion-slide>


   <ion-slide>
 ..............
     </ion-slide>
   </ion-slides>


     </ion-content>

Solution 5

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;
}

View more solutions

Comments

[Nikolay Fominyh]

It will lead to vertical line at left side of slider.

[7200rpm]

This doesn't actually work since it calculates the size of the slide-box, (which is the longest slide) and not the slide itself.

[gamengineers]

This with a combination of ion-slide { overflow-y: auto } worked for me. Thanks much!