0

我在一个看起来很完美的页面中构建了 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>
4

2 回答 2

3

你可以用一些 CSS 来解决这个问题。Owl carousel 在初始化时根据容器宽度调整项目大小。由于该 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 方式。

于 2015-12-11T20:13:32.570 回答
3

问题在于切换“显示：无”/“显示：块”的选项卡，并且轮播不知道激活的选项卡内容的新宽度，这就是它看起来折叠的原因；

要修复它，您可以使用不同的方法来隐藏/显示选项卡，例如在 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

于 2016-12-02T02:33:07.870 回答