Сова Карусель сломан внутри вкладки панели - PullRequest
Новая
       18

Сова Карусель сломан внутри вкладки панели

0 голосов
/ 11 июня 2019

У меня есть Карусель Совы внутри табуляции, как это: 

  <div role="tabpanel" class="tab-pane fade" id="tabAcessorios">
            <div id="acessoriosCompativeis8x" class="featured-carousel brand-dot">
            //itens here
            </div>
    </div>

Когда я нажимаю ссылку, чтобы отобразить вкладку, карусель ломается:

enter image description here

Я попытался запустить обновление следующим образом: 

$("#acessoriosCompativeis8x").trigger("refresh.owl.carousel");

Но это не сработало.Что мне здесь не хватает?

Вот определение nav: 

<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>

А вот определение карусели: 

$('#acessoriosCompativeis8x').owlCarousel({
            items: 2,
            lazyLoad: true,
            loop: true,
            margin: 10,
            autoplay: true,
            autoplayTimeout: 5000
        });

1 Ответ

0 голосов
/ 11 июня 2019

Мне удалось решить проблему, уничтожив и заново создав карусель, когда появилась панель: 

$('#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);
        });
...