Owlcarousel2: PLEASE HELP!! On initial load, height is messed up.

[saturdaynight]

Hi all, sorry to seem to urgent but it is!!

When the slider initially loads the height is messed up and you cannot see the slider.

To see this I do CTRL+F5 on Chrome.

I hope someone can help.

Thanks

[saturdaynight]

I think I fixed it.

Add this to your CSS it worked for me, might need to adjust the value.

.owl-height {min-height: 500px; height:auto !important; height: 500px; }

[keefyhub]

if you havent already, I usually set my carousel to initialise after window load. If the image has no loaded and that is setting the height, it can cause issues

[saturdaynight]

Hi Keefy, how do i do this?

[saturdaynight]

this is my code:

<script> jQuery(document).ready(function($) { $(document).ready(function(){ $(".owl-carousel").owlCarousel({ nav : true, autoPlay : false, autoHeight: true, items: 1, dots: false, navText : ["",""] }); }); }); </script>

[keefyhub]

change jQuery(document).ready( to jQuery(window).load(

Might not help but worth a try

[saturdaynight]

thanks that did work but delayed rendering of the page whereas the method I used above 'seems' to solve the problem without affecting load time.

Thanks

[keefyhub]

Only issue with setting a height is when you are working responsively, you might get some white space where the height of the carousel does not equal the height of the images.

[55N-12E]

Hello i thing we meet the same problem and i see all of you answer and i notice the problem is on the height and i try to write a css in .owl-carousel:{height:auto;} it seem's like fix the problem
i'm still testing
by the way i'm a Chinese coder so my English maybe bad and i'm learning right now hope i help you XD

[pascalporedda]

Duplicate of #556

This issue will be solved with the next release.

[haofiltered]

dots: false can solve the height issue if you don't need dots and don't want extra height for your carousel