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?

Amelina

Good question! I want the answer too! - – Lycaonia

@VVL nothing found mate, but I'm working on a workaround, by making the height as 100% but still no luck :) – Amelina

same here. Any solution on this? – Effective

Answer 1

You can use this :

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

Assuming

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

Phosphocreatine

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

Answer 3

$ionicScrollDelegate.resize(); did the trick

check this for codepen

Brighton

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

Answer 4

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

Overwrite

Answer 5

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>

Colcothar

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

Answer 6

for a more eye-caching design:

set the height of parent box to your desired height (exmp 300px)

set the img overflow and min height to cover all height for images shorter than 300px:

.box img{
    overflow: hidden;
    min-height: 300px;

}
.slider-slides{
    height:300px;
}

Geometry

Answer 7

<ion-slides [ngStyle]="{ 'height': slidesMoving ? 'auto' : (slidesHeight + 'px') }"
            (ionSlideDidChange)="slideDidChange()"
            (ionSlideWillChange)="slideWillChange()">
</ion-slides>

// index.ts
slideDidChange () {
 setTimeout( () => { this.updateSliderHeight(); }, 200); 
}
slideWillChange () {
  this.slidesMoving = true;
}
  updateSliderHeight(){
    this.slidesMoving = false;
    let slideIndex : number = this.SwipedTabsSlider.getActiveIndex();
    let currentSlide : Element = this.SwipedTabsSlider._slides[slideIndex];
    this.slidesHeight = currentSlide.clientHeight;

    console.log('index slide',slideIndex )
    console.log('current slide',currentSlide )
    console.log('height of slide', this.slidesHeight);

  }

// Timeout for dynamically load data. if your content static skip timeout

Misjudge