Карусель Owl v2, ширина элемента рассчитана неверно, если карусель скрыта за содержимым Tab

Question

Я построил 2 отзывчивых Owl-carousel-v2 на странице, которые выглядят идеально. После того, как я поместил их во вкладки, первая карусель работает, но та, что за панелью вкладок, потеряла свою ширину элемента, и я не смог заставить ее работать. Если у меня есть все элементы с определенной шириной, то все элементы будут перечислены вертикально.

Вот моя демонстрационная ручка: http://codepen.io/bard/pen/NxqyQy/

Я думаю, проблема в том, что ширина элемента вычисляется при загрузке страницы.

Как это решить?

HTML:

<ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#track1">Track1</a></li>
                    <li><a data-toggle="tab" href="#track2">Track2</a></li>
                </ul>
                <div class="panel tab-content">
                    <div id="track1" class="panel-body tab-pane fade in active">
    <div class="container-fluid tracker">
        <div class="wrapper-with-margin">
            <div id="owl-demo" class="owl-carousel">
                <div class="item" style="">1</div>
                <div class="item" style="">2</div>
                <div class="item" style="">3</div>
                <div class="item" style="">4</div>
                <div class="item" style="">5</div>
                <div class="item" style="">6</div>
                <div class="item" style="">7</div>
                <div class="item" style="">8</div>
                <div class="item" style="">9</div>
            </div>
        </div>
    </div>
                    </div>
                    <div id="track2" class="panel-body tab-pane fade">
    <div class="container-fluid tracker">
        <div class="wrapper-with-margin">
            <div id="owl-demo2" class="owl-carousel">
                <div class="item" style="">9</div>
                <div class="item" style="">8</div>
                <div class="item" style="">7</div>
                <div class="item" style="">6</div>
                <div class="item" style="">5</div>
                <div class="item" style="">4</div>
                <div class="item" style="">3</div>
                <div class="item" style="">2</div>
                <div class="item" style="">1</div>
            </div>
        </div>
    </div>
                    </div>
                </div>

Answer 1

Вы можете обойти это с некоторыми CSS. Карусель совы изменяет размеры элементов в зависимости от ширины контейнера при инициализации. Так как этот div скрыт, нет ссылки на ширину, и это вызывает кучу. Вы можете исправить это с помощью CSS следующим образом:

    .tab-content>.tab-pane {
    display: block;
    width: 100%;
    height: 0;
    padding: 0;
}

.active .tab-content>.tab-pane {
   height: auto;
   padding: 15px;
}

Обновленная ручка: http://codepen.io/anon/pen/vLNNem

Вы также можете изменить свой javascript, чтобы инициализировать вторую карусель после того, как пользователь щелкнул по второй вкладке, но я, вероятно, просто сделаю это CSS-способом.

Answer 2

Проблема в том, что вкладки переключают 'display: none' / 'display: block', а карусель не знает новой ширины содержимого активированной вкладки, поэтому она выглядит свернутой;

Чтобы исправить это, вы можете просто использовать другой подход для скрытия / отображения вкладок, например, как это в CSS, а затем переключать эти классы в jQuery:

.tab-hidden {
visibility: hidden;
height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.5s ease;
}

.tab-visible {
visibility: visible;
height: auto;
overflow: visible;
opacity: 1;
transition: all 0.5s ease;
}

Вы можете проверить рабочий код здесь: http://codepen.io/slyka85/pen/MbpXxp