Streaming live at 10am (PST)

Making a Slider Responsive


#1

Making a slider responsive is what I am trying to accomplish.

Expectation: When I re-size the browser window the slider images should scale
Maybe this is elementary to responsive design, but none of the instructions I could find say so smile

Here is my site:
http://stonecrest-homes.webflow.io/

When I grab the browser window and re-size it my slider images remain the same.
I would like it to work like the slider on this page:

http://sliders.webflow.com/


I only have one 'set' of slider images at this point.

?- Do I need to create and position additional image versions for each break point? Even so my images should 'scale' prior to reaching that break point correct?

Thanks in advance for the help (I been searching for the answer for about 2-hours to no avail).


Need help to make slider responsive on mobile portrait view
#2

Can you please share your project’s public link so it's easier to understand your issue?

Learn how to do it here: http://help.webflow.com/sharing-your-public-webflow-site-link


#3

Thanks Vincent! Here you go: https://preview.webflow.com/preview/stonecrest-homes?preview=3600e53ac8d80a4d180065dcec41378f


#4

The priciple is an image will resize with its container when dimensions are set in %.

If you do this

your image will adapt.

But you'll then get a problem with the fixed height of your slider. In the example you refer to, the height of the slider is only set by its content so it doesn't stay the same height when you resize the browser.

The easiest way for that is to put your image as an image in the slide rather than a background, and remove all height values of the slider, mask, etc. then place your content, if any, on top of the images with position:absolute. Make all your image the same W/H ratio and give them width 100%. That way you'll get consistency in dimensions across slides.


#5

THANK YOU! I will give it a shot and see how it goes. Also, I will post the results here for others. Seems like a pretty basic concept that should be in the Webflow documentation/tutorials.


#6

Here is the result of re-working my slider and slide so that they remain responsive when the browser is resized.

I removed all height values from the Slider element itself,

then deleted the individual slides as background images and re-added them as regular Image elements.

Then I made the individual Image Settings like so:

That resulted in the images re-sizing when I re-sized the browser window.


#7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.