How to fix spacing issue with variable slide heights using ion-slides?

Ionic Framework ionic-v3
1

I’m using ion-slides to put variable ion-card content inside. The pager only shows up at the bottom of the longest ion-slide. So if slide 1 is 100px height, and slide 2 is 500px height, then the pager shows up below slide 2, which creates a huge white space problem for slide 1.

I should preface by saying I added a .swiper-container { height: initial; } to my sass file, otherwise my content will not scroll.

I can target each slide individually to adjust the height property, but I’d prefer to have a solution where I’m targeting every slide. Any ideas? Thanks,

UPDATE: I wanted to add pager to bottom of a variable slide height, but have since moved the pager to the top, and focused on fixing the additional white spaces at bottom.

1 Like
2

You shouldn’t add that to your container. Rather stick it to a div inside the swiper with your content, otherwise it messes with the UI from ion-slides. Default a slide fills the entire space and the pager is stuck to the bottom, so it will always be visible.

1 Like
3

I just tried applying div inside the ion-slides element, but I got funky results. Here’s the gist of the template I am using -

<ion-content padding>
      <ion-slides pager>
            <ion-slide>
              <ion-card>[variable content]</ion-card>
            </ion-slide>
            ... more slides
      </ion-slides>
</ion-content>

sass - only thing in there to get the scrollbar is this -

    .swiper-container { 
      height: initial;
    }
4

Could you provide me your template and scss related to this problem?

1 Like
5

Hi - so I found the solution to my problem with variable slide heights for ion-slides ui component.

<ion-content padding class="slider-zoom">
    <ion-slides pager>
        <ion-slide>// then adding ion-slide { overflow-y: auto } in scss helped!
            <ion-card>[variable content]</ion-card>
        </ion-slide>
        ... more slides
    </ion-slides>
</ion-content>
3 Likes
6

Hiding all inactive ion-slide elements works for me:

.swiper-slide:not(.swiper-slide-active) > div {
    display:none;
}

cheers…

12 Likes
7

Thanks
:heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes::heart_eyes:

8

Thanks, you saved my day

9

you solve this in ionic 4 in sliders options in your .ts file putting parameter autoheight=true

slideOpts = {
autoHeight: true
};

hope that help!

3 Likes
10

@paulolira Thanks a lot … Working Perfectly :slight_smile: