CODEWITHSUNDEEP
javascriptionic-frameworkslide
sameera207
sameera207

Reputation: 16619

Ion-slide-box with different slide heights

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

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?

Upvotes: 12

Views: 16762

Answers (7)

Mohamed Arshath
Mohamed Arshath

Reputation: 423

<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

Upvotes: 0

Homa
Homa

Reputation: 132

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

Upvotes: 0

Abhimanyu Kumar
Abhimanyu Kumar

Reputation: 11

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>

Upvotes: 1

luckakashi
luckakashi

Reputation: 131

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

Upvotes: 1

MrP
MrP

Reputation: 1458

You can use this : 

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

Upvotes: 5

bCliks
bCliks

Reputation: 2958

$ionicScrollDelegate.resize(); did the trick

check this for codepen

Upvotes: 1

Mithun ck
Mithun ck

Reputation: 39

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

Upvotes: 3

Related Questions