Question

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

这是工作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;
}

Answer 2

我最终使用resize方法工作：

只需为两个滑块添加resize()。

$('.best-selling-slide2').resize();
$('.best-selling-slide').resize();

在标签点击功能中添加此功能会有所帮助！

这是我的工作JSfiddle

只是将此作为答案发布，因为如果将来有人遇到此类问题并进入此页面

我发现的另一个修复是在CSS中，标签CSS正在从display:none更改为display:block，因为当隐藏元素时，滑块的宽度不会被应用，以便修复我已将CSS修改为以下内容：

.tab-content {/*display: none;*/ position:absolute; left:-9999px;}
.tab-content.current {/*display: inherit;*/ position:relative; left:0;}

Answer 3

我尝试了resize()，它只适用于第一个标签。我使用$('.your-element').slick('setPosition');并且它正在运行。

Answer 4

您需要在标签页点击中的jQuery中使用slicksetoptions：

$('.your-element').slick("slickSetOption", "draggable", true, true);

Answer 5

您还可以按以下方式刷新选项卡的单击功能上的标签：

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

对我有用...！

Answer 6

这段代码对我有用

.tab-content>.tab-pane{ display: block; height: 0px; overflow: hidden; }
.tab-content>.active{ height: auto;}

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

6 个答案: