Ion-slides auto height?

Ionic Framework ionic-v3
1

I researched online a lot and I could not find anyway to make ion-slides has auto height based on the content image height. If I don’t set the height for the slider, the slide basically won’t work.

This is really inconvenient because we have different devices like iPhone 4, 5 and 6. The image height is set proportional with the width but how can I set the height of the slider to be the same with the image height? Please help.

Codepen

2 Likes
2

I looked at the source of properties but could not find anything relevant to sizing, keep us posted if you have arrived at a solution. Thank you. https://github.com/driftyco/ionic/blob/master/src/components/slides/slides.ts

3

doesn’t anybody have a solution?

4

maybe here

5

I wrote a LOT of different solutions in that thread. Just code the deepest one in the thread.

Basic idea: wrap your slides in a <div>...</div> and life is good.

6

@ryanlogsdon i used it but not working in my case.

7

@HarshadD sorry, but that part of the architecture was changing on Ionic’s side so often. It seemed that as soon as I wrote a solution, they changed their implementation.

8

@ryanlogsdon is there any other solution to solve this problem?

9

Hi @HarshadD, the only solutions that I know of are in that thread.

1 Like
10 
<ion-slides style="height:100%">
1 Like
11

Hi, I solve the problem, so just want to comment some things in case it helps for people in the future.
I’m using ionic 3, my slides are inside a component, so a did the autoHeight inside an ngOnInit, but you can do it on the ionViewDidLoad.

ngOnInit() {
    this.slides.autoHeight = true;
}

And in the scss, you gotta:

  ion-slides {
    height: auto;
  }

An Important thing for this to work that all the slides have you have some content, if one is empty it will get the height of the other and wont work.

At least it was like these in my case. Hope it helps :wink:

12 
@ViewChild(Slides) mainSlides: Slides;

ngAfterViewInit() {
    this.mainSlides.autoHeight = true;
  }
13

There is an option inside ion-slides options