bug: <ion-slides> with different slide heights

[AOUNT]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

A slider with different heights of slides will have its smaller slides filled with blank spaces at the bottom (when using ion-infinite-scroll)

Expected behavior:

Each slide should be at its exact height, not the height of the tallest one.

Steps to reproduce:

Create a slider with some slides of different height.

Related code:

  <ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="segment" 
  color="warning">
  </ion-segment>

 <ion-slides [options]="slidesOpts" #slides (ionSlideDidChange)="slideChanged()">
 ...
 </ion-slides>

  // manage witching between tabs

  async segmentChanged() {
    await this.slider.slideTo(this.segment);
  }

  async slideChanged() {
    this.segment = await this.slider.getActiveIndex();
  }

insert short code snippets here

Other information:

this fix is no longer working because there is no _slides in V4 https://github.com/ionic-team/ionic/issues/10690

Ionic info:

insert the output from ionic info here

[hellokingdom]

I too would like to know if ionic have plans for allowing variable content height in slides. As we can only use a single ion-content you can't replicate the common pattern in Android of tabs that can swipe and scroll at the same time without each slide being equal the to tallest.

[HarshitChhipa]

@hellokingdom and @AOUNT This can be done by using autoHeight: true, in options.

[liamdebeasi]

Thanks for the issue!

Starting with Ionic 5.7.0, we deprecated ion-slides in favor of having developers install Swiper.js directly in their projects. This gives developers access to new features, an improved developer experience, and bug fixes that they did not have access to when using ion-slides.

Since ion-slides uses Swiper.js under the hood, this migration should allow the functionality of your slides to remain exactly the same.

As a result of this deprecation, we have suspended any new development on ion-slides with the exception of critical fixes, such as resolving security issues.

I am going to close this issue out, but we strongly encourage you to try out the latest version of Swiper.js in your project. We have found that upgrading to the latest version of Swiper.js resolved a large number of common problems that Ionic developers were running into.

Please see https://ionicframework.com/docs/api/slides for more information on this change as well as a step by step migration guide for your apps. Developers will have approximately 1 year to migrate, starting from the initial deprecation in September 2021.

I understand this may not be the immediate resolution you were hoping for, but we think this change will significantly improve the developer experience in the long run by placing control of slides back in the hands of the developers.

[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.