带有 Slick 幻灯片的 Jquery 滑块

Question

我希望在 hquery 选项卡中包含多个滑块，其想法是每个选项卡都将成为 Woocommerce 中的一个类别，但我目前只是将它们硬编码以使它们开始工作。

问题是当我将滑块 html 移动到选项卡代码中时，滑块不再显示？

这是我的问题的精确副本：JSFIDDLE

一旦我理解并克服了这个问题，我就可以加入我需要的循环。

$('.tabs-nav a').on('click', function (event) {
    event.preventDefault();

    $('.tab-active').removeClass('tab-active');
    $(this).parent().addClass('tab-active');
    $('.tabs-stage div').hide();
    $($(this).attr('href')).show();
});

$('.tabs-nav a:first').trigger('click'); // Default


//////////////////////////////////////////////////////////////


$('.slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

Answer 1

你的选择器出错了：$('.tabs-stage div').hide(); 这意味着hie every div inside '.tabs-stage' and his children 所以每个div 都被隐藏了，所以当您使用$($(this).attr('href')).show(); 显示活动滑块时，它只显示滑块而不显示其中仍然隐藏的div。

你应该使用：$('.tabs-stage > div').hide();（他 > 让一切变得不同）这样，它只会隐藏.tabs-stage 的直接孩子。

You FIDDLE edited