Owl Carousel broken inside tab panel - asp.net-mvc

Question

I have an Owl Carousel inside a tabpanel like this:
<div role="tabpanel" class="tab-pane fade" id="tabAcessorios">
<div id="acessoriosCompativeis8x" class="featured-carousel brand-dot">
//itens here
</div>
</div>
When i click the link to display the tab, the carousel is broken:
I tried to trigger the refresh like this:
$("#acessoriosCompativeis8x").trigger("refresh.owl.carousel");
But it didn't work. What am i missing here?
Here's the nav definition:
<ul class="nav nav-tabs nav-stacked" role="tablist">
<li role="presentation" class="active">FOCO/PRÉ-PAGO</li>
<li role="presentation">INDIVIDUAL</li>
<li role="presentation">FAMÍLIA</li>
<li role="presentation">CONTROLE</li>
#if (Model.AcessoriosCompativeis != null)
{
<li role="presentation">Acessórios Compatíveis</li>
}
</ul>
And here's the carousel definition:
$('#acessoriosCompativeis8x').owlCarousel({
items: 2,
lazyLoad: true,
loop: true,
margin: 10,
autoplay: true,
autoplayTimeout: 5000
});

Answer 1

I managed to solve the issue by destroying and re-creating the carousel when the panel appears:
$('#linkAcessorios').on('shown.bs.tab', function (e) {
var owl = $('#owl-example').owlCarousel(opcoes);
owl.trigger('destroy.owl.carousel');
owl.html(owl.find('.owl-stage-outer').html()).removeClass('owl-loaded');
owl.owlCarousel(options);
});