Tabs Owl转盘v2，如果转盘后面的选项卡内容不正确，则项目宽度计算错误

我在一个页面中构建了2个响应灵敏的Owl-carousel-v2，看起来非常完美。 在我将它们放入选项卡后，第一个转盘可以工作，但是选项卡面板后面的那个转盘失去了它的项目宽度，我无法使它工作。 如果我有一定宽度的所有项目，那么所有项目都将垂直列出

这是我的演示笔：

我想问题在于页面加载时项目宽度的计算

如何解决这个问题

HTML:

1.
2.
3.
4.
5.
6.
7.
8.
9
9
8.
7.
6.
5.
4.
3.
2.
1.

您可以使用一些css来解决这个问题。Owl转盘在初始化时根据容器宽度调整项目大小。因为那个div是隐藏的，所以没有宽度可以引用，这导致了聚集。您可以使用css纠正此问题，如下所示：

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

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

更新笔：

---

您还可以在用户单击第二个选项卡后更改javascript以初始化第二个旋转木马，但我可能只是用CSS的方式来完成。

您可以使用一些CSS来解决这个问题。Owl转盘在初始化时根据容器宽度调整项目大小。因为那个div是隐藏的，所以没有宽度可以引用，这导致了聚集。您可以使用css纠正此问题，如下所示：

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

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

更新笔：

---

您也可以在用户单击第二个选项卡后更改javascript以初始化第二个旋转木马，但我可能只使用CSS方式进行初始化。

问题在于选项卡切换“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;
}

您可以在此处测试工作代码：

---

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

要解决这个问题，您可以使用不同的方法隐藏/显示选项卡，例如在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;
}

您可以在此处测试工作代码：