Jquery Slider mit Slick Folie

Question

Ich möchte mehrere Schieberegler innerhalb von Hquery Tabs haben, die Idee ist, dass jede Registerkarte eine Kategorie in Woocommerce sein wird, aber ich bin gerade dabei, sie hart zu codieren, um sie zunächst zu arbeiten.

Das Problem ist, wenn ich den Schieberegler HTML in den Tab-Code die Schieberegler nicht mehr zeigen?

Hier ist eine exakte Kopie meiner Frage: JSFIDDLE

Sobald ich verstehen und überwinden dieses Problem, das ich Huhn in den Schleifen brauchen Ich habe in der Lage bin.

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

Sie haben einen Fehler gemacht mit dem Selektor: $('.tabs-stage div').hide(); Das bedeutet hie every div inside '.tabs-stage' and his children so jeder div wird ausgeblendete, so dass, wenn Sie den aktiven Schieber zeigen mit $($(this).attr('href')).show(); es nur den Schieber zeigen und nicht das div hinein, die noch verborgen sind .

Sie sollten verwenden: $('.tabs-stage > div').hide(); (er > machen den Unterschied) auf diese Weise verstecken es nur die direkten Kinder aus .tabs-stage.

You FIDDLE edited