为什么光滑的滑块不适用于选项卡?

Question

我在选项卡中使用了光滑的滑块。在第一个标签幻灯片中工作良好。但是当我们单击第二个选项卡时 - 滑块消失了。

https://codepen.io/malinosky/pen/jvgqxO?editors=1010

我用了

$('.js-photo').slick("setPosition", 0);
$('.js-presentation').slick("setPosition", 0);

但这对我不起作用。我的错误是什么？

Answer 1

因为当滑块隐藏时，它的高度为 0。

因此，当滑块可见时，您应该刷新光滑的位置：

target.fadeIn("200", function() {
$('.js-photo').slick("setPosition", 0);
});

示例：https://codepen.io/anon/pen/jvgVqR

Answer 2

我通过 CSS 找到了一个解决方案，它在我的解决方案上运行良好。

您可以将非活动选项卡设置为

overflow-y: hidden
height: 0

而不是经典

display:none

参考链接 ： https://github.com/kenwheeler/slick/issues/341

谢谢

Answer 3

您可以在选项卡(按类(或一个选项卡(按 id(上设置 onClick 函数，如下所示

$("#tab1").click(function(){
$('.carousel-1').slick('refresh');
});

在选项卡和选项卡窗格上要小心

参考 Github

Answer 4

代码笔演示错过了原始代码的初始setPosition。

我还分叉了一个代码笔演示： https://codepen.io/RobJS/pen/zJgojN?editors=1010

Answer 5

autoplay: false,
autoplaySpeed: 2000,
fade: true,
arrows: false,
**lazyLoad:'ondemand'** 

使用lazyload并在单击后等待 2 秒(代码笔需要此时间来更新(。