Slick Slider funktioniert nicht in jQuery Tabs

Ich habe ein Karussell mit Slick-Schieberegler funktioniert gut in der ersten Registerkarte, aber wenn ich auf zweite Registerkarte gehen, wird der Schieberegler nicht geladen, wenn ich die zweite Registerkarte standardmäßig öffnen dann nicht laden zweite Registerkarte, aber nicht die erste Registerkarte bis dahin, ich glaube Slick Slider-Code ist initialisiert und dann nicht wieder initialisiert, wenn Tab geändert wird, aber nicht sicher, wie damit umzugehen, kann jemand bitte vorschlagen?Slick Slider funktioniert nicht in jQuery Tabs

Hier ist die Arbeits JSfiddle example

Die jQuery für die Registerkarte folgt:

$('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(); 
}

Vielen Dank im Voraus!

Quelle

2017-02-19 Sanjeev Kumar

ich weiß, sieht die Webseite gut, wie es ist, Aber könnten Sie alles in Ihrem Code entfernen, das für Ihr Problem nicht unbedingt notwendig ist? Außerdem, 'wenn ich die zweite Registerkarte standardmäßig öffne und nicht in der zweiten Registerkarte, aber nicht in der ersten Registerkarte lade '. Können Sie mir erklären, was Sie meinen? – SpyderScript

@JavaSpyder Ich habe zwei Schieberegler in beiden Registerkarten, das Problem ist, Schieberegler/Karussell funktioniert nicht in der nächsten Registerkarte. –

Ich habe es schließlich mit Resize-Methode arbeiten:

einfach die resize() für beide Schieber hinzuzufügen hatte.

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

Das Hinzufügen dieser Tab-Klick-Funktion würde helfen! Hier

ist mein Arbeits JSfiddle

Genau dies als Antwort veröffentlichen, denn wenn jemand diese Art von Problem in Zukunft stellen und kommen auf diese Seite

Ein weiterer Fix ich gefunden habe, innerhalb von CSS ist, die Registerkarte CSS display:none-display:block, weil die Breite des Schiebers, wenn das Element versteckt geändert wird, erhalten angewandt nicht, dies zu beheben, habe ich die CSS folgende Änderung:

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

Quelle

2017-02-20 06:42:14

Slick Slider funktioniert nicht in jQuery Tabs

Antwort

Verwandte Themen