Javascript 隐藏容器中的平滑滑块零宽度（引导选项卡）

我使用引导4选项卡导航来查看选项卡面板中的不同滑块

它适用于活动选项卡。但非活动选项卡中的滑块宽度为0（

.slide-track

）。因此，在我开始浏览选项卡之前，存在显示问题。之后，设置宽度，滑块看起来很好

有没有办法将滑轨的宽度设置为正确的尺寸

$（'.slider home'）.slick({
点：是的，
箭头：是的，
});
$（'.slider profile'）。光滑({
点：是的，
箭头：是的，
});
$（'.slider contact'）。光滑({
点：是的，
箭头：是的，
});
.slick prev:before，
.滑头下一个：之前{
颜色：蓝色；
}
.选项卡窗格{
填充：2rem0；
}






主页1

家庭2

主页3

家庭4

档案1

档案2

档案3

档案4

档案5

联系1
联系方式2
联系3
问题在于，当容器被隐藏时，其子元素无法计算其宽度

为了解决这个问题，您可以在显示选项卡时实例化
slick（）
控件。然后可以计算宽度。试试这个：

$('a[data-toggle="tab"]').on('shown.bs.tab', function() {   
  $($(this).attr('href')).find('.slider').slick({
    dots: true,
    arrows: true
  })
}).first().trigger('shown.bs.tab');

另一种解决方案是在显示初始化的滑块后手动刷新该滑块。

下面是一个演示：


//初始化滑块。
$（'.slider'）。光滑({
点：是的，
箭头：是的，
});
//当显示选项卡时。。。
$（'.nav link'）.on（'show.bs.tab'，function（））{
//…选择相应的选项卡窗格。。。
让$tabPane=$（$（this.attr（'href'））；
//…并刷新其滑块。
$（'.slider'，$tabPane）.slick（'refresh'）；
});
.slick prev:before，
.滑头下一个：之前{
颜色：蓝色；
}
.选项卡窗格{
填充：2rem0；
}






主页1

家庭2

主页3

家庭4

档案1

档案2

档案3

档案4

档案5

联系1
联系方式2
联系3
对不起。。。又是我。我试图让它与一个以上的标签内容领域的工作。但在那之后，滑块再次断裂。下面是我的示例：这与
.first（）
参数有关吗？好的，如果我将
.first（）
更改为
.eq（）
，两个滑块之间的导航/同步将再次工作。如果我将两个滑块放在一个选项卡面板中，则隐藏容器中的滑块仍很不幸损坏。为了防止错误，最好使用以下命令：
$（$（this）.attr（'href'））.find（'.slider'）。not（'.slick initialized'）.slick'）({…
因为如果不添加此项，您将看到：slick.min.js:1未捕获类型错误：无法读取null的属性“add”