Owl Carousel breaks when initialized in hidden container

Question

When Owl Carousel is initiated in a hidden element and that element is then displayed through a trigger, the width of the carousel items is completely wrong (until window gets resized):

Fiddle (click on red link, see the broken layout appearing, then resize the window)

This issue was discussed more than a year ago on Github, but nothing I can use. And Owl Carousel hasn't been updated since before the discussion.

Any suggestion?

$('.owl-carousel').owlCarousel({
    items: 3,
    loop:true,
    nav:true,
})

$(".trigger").click(function(){
    $(".target").toggleClass("hidden");
});

Answer 1

I faced the same problem. Try height: 0px and opacity: 0 instead of hiding and height: 100% and opacity: 1 for showing. It worked for me.