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

Question

我在选项卡中使用了光滑的滑块。在第一个选项卡幻灯片中效果很好。但是当我们点击第二个选项卡时 - 滑块消失了。

我用过

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

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

Answer 1

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

所以你应该在滑块可见时刷新slick的定位：

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

Answer 2

codepen 演示缺少原始代码的初始 setPosition。

Answer 3

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

使用 lazyload 并在点击后等待 2 秒（codepen 需要这段时间来更新）。

Answer 4

我已经通过 CSS 找到了解决方案，并且在我的系统中运行良好。

您可以将 not-active 选项卡设置为

overflow-y: hidden
height: 0

而不是经典

display:none

谢谢

Answer 5

您可以像这样在选项卡（通过 class）或一个选项卡（通过 id）上设置 onClick 功能

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

小心选项卡和tab-pane

Why does slick slider not work with tabs?