Owlcarousel2: Carousel broke when initialized on hidden container

[eparisio]

I try the last dev update, my older version is the master version, and when i load carousel on hidden content the carousel broke. Before with the master ver. it works perfectly on hidden content too.
In this example the content is messed up.
On my website the carousel don't trigger anything, don't give any error and is visible only one image + navs (the carousel is initialize correctly, all elements are created but it stop working), it is inside a boostrap tab.

I have used the script from the site in this fiddle, not exactly the last dev, because the link on the jsfiddle example didn't work.

http://jsfiddle.net/93cpX/3/

[jasonujmaalvis]

I'm facing the same issue. When the tab gets displayed we need to recalculate the carousel, not sure how this would be acheived. I've tried the refresh event but doesn't recalculate the widths of the items within the carousel.

$(".trigger").click(function(){
$(".target").toggleClass("hidden");
$(".owl-carousel").trigger("refresh.owl.carousel");
});

Does anyone have any ideas?

Thanks

[jasonujmaalvis]

I've worked out a quick work around by having the tab instead of display none have the opacity set to zero and visibility to hidden.

[witrin]

Thanks and confirmed! Here is a patch for the meantime: http://jsfiddle.net/93cpX/17/

[jasonujmaalvis]

@witrin perfect thanks for your input!

[witrin]

This is related to #147.

[witrin]

See #239.

[witrin]

And also #254.

[ghost]

Thanks for the patch witrin.. confirmed it's working with bootstrap 3 tabs

[chandra10207]

Same issue here.
I have added owl-carousal inside li tag
initially carousal is hidden i.e display:none; from css and after li:hover I have make it display:block.

Problem is:
Owl carousal calculate item width on hover only so it breaks the design intially on hover.

Can I make owl carousal to calculate with initially on hidden div?

[arturhaddad]

I had this problem when i placed owl carousel inside a fancybox.
I patched it changing the display: none container to height: 0, opacity: 0.