为什么光滑的滑块不适用于标签？答案

【问题标题】：Why does slick slider not work with tabs?为什么光滑的滑块不适用于标签？
【发布时间】：2022-02-21 01:12:20
【问题描述】：

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

我用过

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

您可以将非活动标签设置为

overflow-y: hidden
height: 0

而不是经典

display:none

谢谢

【讨论】：

【解决方案5】：

您可以像这样在标签（按类）或一个标签（按id）上设置onClick功能

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

注意选项卡和选项卡窗格

【讨论】：