光滑的滑块在jQuery选项卡中不起作用

Question

我有一个圆盘传送带，使用光滑的滑块在第一个选项卡中工作正常，但是当我转到第二个选项卡时，滑块未加载，如果我默认打开第二个选项卡，则此时未在第二个选项卡中加载，但未加载第一个选项卡，认为光滑的滑块代码已初始化，然后在更改选项卡时不再重新初始化，但不确定如何处理，请有人建议吗？

这是工作的JSfiddle示例

标签的jQuery如下：

$('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
});
if (window.location.hash.length > 0) {
  var hash_str= window.location.hash.split("#")[1];
  $('.tab-link[data-tab=' + hash_str + ']').click();
}

提前致谢！

Answer 1

您还可以刷新选项卡点击功能上的光滑效果，如下所示：

$('.best-selling-slide2').slick('refresh');
$('.best-selling-slide').slick('refresh');

它对我有用......！

Answer 2

其背后的原因是，slick拒绝在不活动的选项卡上正确初始化-因为它们（不活动的选项卡）由display:nonecss属性组成。因此，请尝试按以下方式设置隐藏标签的CSS：

{
  display: block;
  height: 0;
  overflow: hidden;
}

然后，height当隐藏选项卡变为活动状态时，您还需要将属性重置为其大小。为此，您只需执行以下操作：

{
  height: auto;
}