search

glidejs / glide

A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more
https://glidejs.com
MIT License
7.33k stars 771 forks source link

max height for slider container #604

Open Mikilll94 opened 2 years ago

Mikilll94 commented 2 years ago

@jedrzejchalubek Thanks, for this awesome library.

There is one thing which is bugging me. How to set max-height for the slider container?

Here is what I am trying: https://codesandbox.io/s/glidejs-max-height-qo2ek

I have tried to set max-height: 200px on .glide-container, .glide, .glide-track, .glide-slides, .glide-slide but nothing is working.

I expect that the images should scale proportionally when the max-height is set on glide container.

Sammeeey commented 1 year ago

Potential duplicate of #421 (or at least very related).

This reply here helped me to adjust all images according to the height of .glide__slides:

.glide__slides {
    height: 400px;
}

.glide__slide {   /* applies to all images in the slider */
    object-fit: contain;
}

The additional benefit is that this keeps the right- and left-arrows vertically centered (so that they don't jump around when the image changes).

According to this stackoverflow reply there has been an autoheight option in the past. Doesn't seem to be documented and didn't work for me.

Is there a better solution? Maybe even a feature of Glidejs?