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?

@VVL nothing found mate, but I'm working on a workaround, by making the height as 100% but still no luck :) — sameera207, Feb 16 '15 at 12:57

score 5 · Answer 1 · answered Sep 18 '15 at 12:58

5

You can use this :

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

answered Sep 18 '15 at 12:58

MrP

1,408
18
23

score 3 · Answer 2 · answered Apr 04 '15 at 07:50

3

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

answered Apr 04 '15 at 07:50

Mithun ck

39
2

It will lead to vertical line at left side of slider. – Nikolay Fominyh Apr 12 '15 at 23:43

score 1 · Answer 3 · answered Jun 12 '15 at 10:08

1

$ionicScrollDelegate.resize(); did the trick

check this for codepen

answered Jun 12 '15 at 10:08

bCliks

2,918
7
29
52

4

This doesn't actually work since it calculates the size of the slide-box, (which is the longest slide) and not the slide itself. – 7200rpm Nov 05 '15 at 23:43

score 1 · Answer 4 · answered Jun 15 '16 at 18:17

1

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

answered Jun 15 '16 at 18:17

luckakashi

131
1
4

score 1 · Answer 5 · answered Jan 21 '17 at 09:57

1

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>

answered Jan 21 '17 at 09:57

Abhimanyu Kumar

11
1

This with a combination of ion-slide { overflow-y: auto } worked for me. Thanks much! – gamengineers May 31 '17 at 19:21

score 0 · Answer 6 · answered Mar 25 '17 at 14:59

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

score 0 · Answer 7 · answered Oct 29 '18 at 06:01

<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

Ion-slide-box with different slide heights

7 Answers7