<ion-slides> with different slide heights

[alanhe421]

1. slide1:979px
2. slide2:1686px when the user slide to slide1 , it appear blank space (707px).

i hope slide-height of slides can be different

[twincle]

+1

this is my temporary solution

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

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

[jgw96]

Hello! While we appreciate you opening an issue with us i am going to close this issue and ask that you open a new one that has the issue template filled out please. Thanks for using Ionic!

[EugeneSnihovsky]

@twincle thanks for, perhaps the only working solution. In additional for other developers. Solution need two fixes:

1. Initial value of slidesMoving should be true. Otherwise scroll on init will not work until slide manually changed

2. slideDidChange logic should be wrapped in try/cath. Otherwise app will throw an error Cannot read property 'clientHeight' of undefined when you try to swipe right on last slide

   public slidesHeight: string | number;
   public slidesMoving: boolean = true;
   
   public slideDidChange(): void {
       try {
           this.slidesMoving = false;
           let slideIndex: number = this._slides.getActiveIndex();
           let currentSlide: Element = this._slides._slides[slideIndex];
           this.slidesHeight = currentSlide.clientHeight;
       } catch (e) {}
   }
   
   public slideWillChange(): void {
       this.slidesMoving = true;
   }

P.S: if you don't need infinite scroll, you can just modify css rules for each slide item

  max-height: 100%;
  overflow-y: scroll;

[brunolm]

Is there an official fix for this? The workaround works but it's kinda weird

[ChrisProlls]

Same here ! Any news ?

[jayinai]

@EugeneSnihovsky thanks but for your first point it doesn't work for me when my 1st slide is shorter.

[EugeneSnihovsky]

@ShuaiW I don't use this fix anymore, because I don't use ionic slides. I need infinite scroll on each of my slide and it is not possible with ionic slides. Instead of it I use siema and all works without problem.

Also I removed cordova-plugin-ionic-webview from project because it has as many bugs as ionic slider, and some of them are critical:

• app view broken when I move app to background and then to foreground
• app view broken when I change device orientation by rotating device

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.