Owl Carousel broken inside tab panel

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"><a href="#tabFocoPre" class="waves-effect waves-light" role="tab" data-toggle="tab">FOCO/PRÉ-PAGO</a></li>
                                                                            <li role="presentation"><a href="#tabIndividual" class="waves-effect waves-light" role="tab" data-toggle="tab">INDIVIDUAL</a></li>
                                                                            <li role="presentation"><a href="#tabFamilia" class="waves-effect waves-light" role="tab" data-toggle="tab">FAMÍLIA</a></li>
                                                                            <li role="presentation"><a href="#tabControle" class="waves-effect waves-light" role="tab" data-toggle="tab">CONTROLE</a></li>
                                                                            @if (Model.AcessoriosCompativeis != null)
                                                                            {
                                                                                <li role="presentation"><a href="#tabAcessorios" class="waves-effect waves-light" role="tab" data-toggle="tab">Acessórios Compatíveis</a></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);
        });