Streaming live at 10am (PST)

Make a responsive slider fit to image

Hello!

I’m trying to make a slider responsive and keep 16:9 aspect ratio. I’ve added an image with the same aspect ratio (as background image) but I’m having problems making it re-size when going down in screen size. As it looks in full width right now is how I want it to look when going smaller.

I’m also a bit confused if I should add an image in the Slide or if I should add that image as a background. When I’m done with testing I will eventually want it to grab image and text from CMS content.

I hope someone is able to help me.

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/cal-1-0?utm_medium=preview_link&utm_source=dashboard&utm_content=cal-1-0&preview=77874108770c01158e32196d77a9abcf

Hi @vwis. There is no slider on your project. Could you verify please?

Eve Kayser

Hi! Sorry about that, I worked on it yesterday and didn’t realize the link updates. Will fix it and write here again later.

Thanks!

Hi VWIS,

How did you go about working this out…? I am having the same trouble.

I would like a slider to maintain the aspect ratio of 16:9.

I am able to achieve this with a DIV background and padding at 56.25% - works very well. However I would like my slider to behave this way as well… but I am unable to work it out.

Any help appreciated.

Hey! I decided to go with another design so did not get it to work. I am still very new to webdesign and Webflow, but I would be happy to check your project out if you send a link :slight_smile:

https://preview.webflow.com/preview/slider-responsive-at-16-9?utm_medium=preview_link&utm_source=dashboard&utm_content=slider-responsive-at-16-9&preview=58593fd3ea67b537e1b21839584a20be&mode=preview

I have been struggling on this for a couple of weeks on and off.

Cheers Mate.

Hi guys @vwis @mrstylist!

You can just reset slider configurations and set height: auto:

And just add your image with 16:9 ratio that will fit in the slider.

If you have different image sizes, and still want to keep the 16:9 ratio, you can set height: 56.27 vw and fit: cover.

The idea is to divide 100% width / 1.777 (16:9 ratio), so we have 56.27 vw on height.

I hope it helps you guys,
Cheers!

Eve Kayser

2 Likes

I got it to work, thank you very much! @mrstylist let me/us know if you are still having problems.

evekayser, you are a little ripper! Thanks mate, it worked a treat.

2 Likes

Hm. Hi, doesn’t work in my case. :frowning: I made exactly the same steps, but the height is to high.