javascript - 光滑的 slider 在 jQuery 选项卡中不起作用

Question

我有一个旋转木马在第一个选项卡中使用光滑的 slider 工作正常，但是当我转到第二个选项卡时， slider 没有加载，如果我默认打开第二个选项卡然后不加载到第二个选项卡而不是第一个选项卡然后，我认为光滑的 slider 代码已初始化，然后在更改选项卡时不会再次初始化，但不确定如何处理此问题，有人可以建议吗？

这是工作 JSfiddle example

标签的 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

这背后的原因是，slick 拒绝在非事件选项卡上正确初始化 - 因为它们(非事件选项卡)由 display:none css 属性组成。因此，请尝试按如下方式设置隐藏标签的 CSS:

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

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

{
  height: auto;
}