CODEWITHSUNDEEP
javascriptjqueryhtml
Yes I am a cat
Yes I am a cat

Reputation: 279

jquery cycle slider height issue

I've been trying to make the slider on this page behave responsively. However, it seems it requires a fixed height on the container, otherwise it does not display the entire slide.

Is there a way (other than going to jquery cycle 2 plugin which I am not allowed to do) to declare a height:auto and still display the entire image? I initially suspected it's something to do with floats, but they are all cleared and still not working.

If I force overflow:show on the wrapper (#industries-slider) I run into issues with the #nav which does move with the overflow.

What am I doing wrong?

Thanks!

Update: responsive, not adaptative. I know I can use media queries to adjust the height, but on exotic displays (and on browser resize which is how its being tested, there is a visible jump of the #nav

Upvotes: 0

Views: 370

Answers (1)

Mykhailo Zhuk
Mykhailo Zhuk

Reputation: 777

Ok, set position: absolute again. You can set the height of #industries-slider1 using jQuery.

 //Find the max height of items
        var heights = $(".slide-item").map(function ()
        {
            return $(this).height();
        }).get(),
        maxHeight = Math.max.apply(null, heights);
 //Set #industries-slider1 height
        $('#industries-slider1').height(maxHeight);

Upvotes: 2

Related Questions