Fixed Height, Responsive Width Slider

[sarastrese1]

I'm looking to create a slider like this:
http://kaisertrabue.com/index.html

The height and width are responsive to the logo and nav elements. Any idea how to achieve this?

---

[Waldo]

Hey @sarastrese1 great question! Building a slider like that what you will need to do is the following:

(1) Add in a section element and then a slider element inside of it to your Webflow site

(2) Make the Section element 100% width, and 100vh for the height (type in 100vh into the height field) and add padding to the section as needed

(3) Make the slider 100% width & a certain height (say 80vh or 90vh) with padding

(4) Set a class on the slides of say "Slide" and give it a background image which is set to: Cover with no repeat. Then for each subsequent slide, give it a Combo class (click in the Selector field and type in an additional class name) and change the background image

(5) Within the slider settings, set the slider to a Fade transition & autoplay

(6) The logo can be set to a fixed position in the top right of the page, make sure it has a set width & height, maybe 220px width by 80px height or so (those could be your max-widths and you can set the width/height to 100% to make it responsive though 240px and under is usually a good width to go with for responsive design).

Please let me know if this helps

[sarastrese1]

That's totally worked! That is just what I needed to know! Thank you so much!

[system]

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