Owl carousel v2, item width calculated wrong if th

Question

I built 2 responsive Owl-carousel-v2 in a page which look perfect. After I put them into tabs, the first one carousel works but the one behind tab panel lost it's item width, and I couldn't make it work. If I have all the items with a certain width then all items will be listed vertically.

Here is my demo pen: http://codepen.io/bard/pen/NxqyQy/

I guess the problem is item width are calculated when the page loads.

How to solve this?

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

You can work around this with some css. Owl carousel resizes the items based on the container width when it initializes. Since that div is hidden, there is no width to reference and it's causing the bunch up. You can correct this with css like so:

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

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

Updated pen: http://codepen.io/anon/pen/vLNNem

You can also change your javascript to initialize the second carousel after the user has clicked the second tab, but I'd probably just do it the CSS way.

Answer 2

The issue is with the tabs toggling 'display: none' / 'display: block' and the carousel doesn't know the new width of the content of the tab activated, that's why it looks collapsed;

To fix it, you can just use a different approach to hide/show tabs, for example like this in CSS, and then toggle these classes in 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;
}

You can test the working code here: http://codepen.io/slyka85/pen/MbpXxp