带有滑动滑块的jQuery滑块

Question

I am wanting to have multiple sliders inside of hquery tabs, the idea is that each tabs will be a category in Woocommerce but I am currently just hardcoding them in to initially get them to work.

The problem is when I move the slider html into the tab code the sliders no longer show?

Here is an exact replica of my issue: JSFIDDLE

Once I understand and overcome this issue I am able to hen put in the loops I need.

$('.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

You made a mistake with your selector : $('.tabs-stage div').hide(); This means hie every div inside '.tabs-stage' and his children so every div is hided, so when you show the active slider with $($(this).attr('href')).show(); it only show the slider and not the div inside it who are still hidden.

You should use : $('.tabs-stage > div').hide(); (he > make all the difference) this way, it only hide the direct children off .tabs-stage .

You FIDDLE edited