猫头鹰轮播v2，如果Tab内容后面的轮播，则项目宽度计算错误 [英] Owl carousel v2, item width calculated wrong if the carousel behind Tab content

问题描述

我在一个看起来完美的页面中构建了2个响应式Owl-carousel-v2. 将它们放入标签后，第一个轮播可以使用，但标签面板后面的那个却失去了项目的宽度，我无法使其正常工作. 如果我所有的物品都具有一定的宽度，那么所有的物品都会垂直列出.

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.

这是我的演示笔: http://codepen.io/bard/pen/NxqyQy/

我想问题是页面加载时会计算出项目宽度.

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

如何解决这个问题?

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>

推荐答案

问题在于选项卡切换了显示:无"/显示:块"，而轮播不知道内容的新宽度标签页被激活，这就是它看起来不完整的原因；

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;

要解决此问题，您可以使用其他方法来隐藏/显示选项卡，例如在CSS中这样，然后在jQuery中切换这些类:

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

您可以在此处测试工作代码: http://codepen.io/slyka85/pen/MbpXxp

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

这篇关于猫头鹰轮播v2，如果Tab内容后面的轮播，则项目宽度计算错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！