how to set owl carousel to after page loads

Question

The owl carousel does not load correctly until screen is resized, or if I set a fixed width. How do I set owl carousel to load after other elements? Please help. (awesomne canvas template)

SemiColonWeb · Accepted Answer

Hello,

Apologies about the Inconveniences caused!

Can you please provide us with a Live URL so that we can check out the exact issue with the Owl Carousel and provide you with more assistance on this. Thanks for your Patience.

Additionally, you can consider using the following code to refresh the Owl Carousel:


$('.carousel-widget').trigger('refresh.owl.carousel');

Hope this Helps!

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

jillatsitewaves · Answer

Oh thank you, I had missed this reply until today! While waiting for the reply I had manually set owl carousel height via css to ensure correct height. So, I do not have an example right now. The problem was that the carousel auto height occurred before images loaded, so very small height.
For the code you provided, how would I implement that? Just add to page surrounded by script tags?
Thanks

Semicolon Web · Answer

Hello,

You can simply use this code inside the Window Load script tags. Example:


&#x9;jQuery(window).on( &apos;load&apos;, function(){
&#x9;&#x9;jQuery(&apos;.carousel-widget&apos;).trigger(&apos;refresh.owl.carousel&apos;);
&#x9;});

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

jillatsitewaves · Answer

SemiColonWeb Team = Awesome ! Thanks

Semicolon Web · Answer

Hello, Thanks for the Kind Words! :) Very Happy to Help! Do let us know if we can help you with anything else or if you find any further issues with Canvas.