Slider doesn't scale responsively

Hey,

I have a slider that I want to use as an image viewer (ideally I want to use a lightbox, but webflow doesn’t have one of these), but I can’t get it to scale properly. It’s either set to auto, but really small, or if I code it to be bigger and fit the images in, it doesn’t scale down properly. The first two slides the image is set to contain, but the third contain is turned off.

The site is here:

http://thebestbuds.webflow.com/comicepisode4

Any ideas?

Hi there, it seems you have your slider height set to only 300px, while your images are 621px in height. When you set the image to contain, then you are telling slider container to fit that 621px image in a 300px container + whatever paddings or margins you are using. So thus the very small image when containing your images.

What might be better for you, is to make sure you are first in desktop view, and change your slider height to 621px with the Contain option still selected and then on small device views (tablet, phone landscape, phone portrait) is to change the slider height for each one of those view ports. This will cause the image to also shrink on the lower devices, while still displaying the entire image… you can play around with the slider height at different view modes, to see what works best to display your image the best, while at same time, conforming to the different device dimensions.

Hope that helps, cheers!

621px is actually the width and 878px is the height, but either way, setting the height to the size of the image means that it won’t scale down below that height. I’ve set the image to be the correct height on the different mobile platforms, so that’s working fine, but I want the image to scale down to different desktop resolutions, as a lot of laptops still use 1280x800 resolution displays. This way the slider will scale down to fit in smaller resolutions, but hard coding the slider height doesn’t allow me to do that.

Setting the slider to auto automatically resizes it to 300px. Then if I set each individual slide to auto and contain, the image resizes, but it crops off a massive portion of the bottom of the image because the slider container isn’t recognising the correct height.

Also, if I set the minimum height of the slider, that works to a point, but the slider section doesn’t respond to increase beyond that at higher resolutions

Anybody have any ideas??

1 Like

How did this go for you? Any help on how to solve what you wrote above on May 12th?

1 Like