How do I set a height on my responsive slider using CSS before page load

Question

What is it

A jquery Cycle slider, which, on window load and window resize, uses a combination of css and javascript to resize everything responsively.

What's wrong

When the page loads, the slider has a height of 0 set in the css (because I don't know the screen size until the page has loaded) and then uses js to resize the slider to an appropriate height and start running the slideshow.

However this means that until the js loads/runs, the slider isn't visible, meaning it "pops" into view, pushing the content below it down. This seems to be a general problem with responsive sliders like flexslider or cycle.

Is there a way of setting the height using css?

Answer 1

I think version 2 of cycle are you looking for

http://jquery.malsup.com/cycle2/demo/autoheight.php