Streaming live at 10am (PST)

Responsive and interactions inside a slide


#1

Hello guys is there any tutorial for made the slider responsive , for keep the ratio on the image?
and a tutorial for use interactions inside a slider?
thanks very much.


#2

Hi @bambanx, here is full width slider tutorial, have you watched this one ?

http://tutorials.webflow.com/full-width-slider

If you want to keep the ration of an image during resize, you can set the width to 100% for your image, and the image will automatically determine the height upon resize to keep the aspect ratio.

For the tutorial on how to use an interaction using the Slider trigger, that tutorial is not made yet. We have it on our list, and will try to get that made as soon as possible..

If you have a specific site that you are working with with the Slider trigger, if you post the read only link, we can also give you some advice about that. More info on read only links:

http://help.webflow.com/general/support-guidelines#how-do-i-share-my-sites-read-only-link

Cheers, Dave


#3

Thanks, i only must set the slides on 100% what about the mask and the slider container, if i dont get a fix value to my slider container the images dont display well.
So what is the aproach for made a responsive slider?
thanks


#4

If you want the slider to fit your image aspect ratio perfectly and also fill the page width:

  • set an instance the slider component and adjust the following properties:
    width = 100%
    height = auto;

  • drag a image container into your first slide (media>image)
    upload your image
    set the property for width to 100%

Your slider should now fill the browser width (or the width of any container) and the height of the slider will be determined by the image height of your tallest image. All of your images will have to maintain a consistent width to height aspect ratio for them to all fill the slider. The slider does not adapt to fit an images height between slides.

Hope it helps. - Rob


#5