Inhalt ausblenden/anzeigen abhängig davon, ob die Slick-Navigationspfeile zeigen

Question

Ich habe zwei Slick Karussells auf einer Seite, eine mit Daumen, die den Hauptschieberegler steuert. Manchmal kann der Schieber viele Elemente haben und wir möchten das Karussell durch Klicken auf einen Link erweitern, so dass alle Daumen sichtbar sind, anstatt die linken und rechten Pfeile verwenden zu müssen, um vor und zurück zu navigieren. Wenn Sie erneut auf den Link klicken, werden die Daumen in ein Karussell zurückgesetzt.

Das funktioniert alles gut. Was ich jedoch tun möchte, ist nur den Link zum Erweitern/Zusammenklappen zu zeigen, wenn die Pfeile sichtbar sind, weil manchmal nicht genug Daumen vorhanden sind, um etwas zu erweitern.

Ich habe durch die events und methods sehe aber nichts sehe ich so etwas tun können:

irgendwelche Ideen

if(slickArrowsAreVisible) { 
    do stuff 
} 

Wer, wie ich dies erreichen könnte?

Answer 1

Ich glaube, Sie brauchen ein Button-Element in slick Karussells zu finden. Nach diesem Code,

Über Code, nur funktioniert, wenn Button-Element im domready Zustand existiert. Wenn das Schaltflächenelement dynamisch erstellt oder gelöscht wird, können Sie MutationObserver oder DOMNodeInserted verwenden.

, wenn Sie verwenden DOMNodeInserted

$('.slick').bind('DOMNodeInserted', function(e) { 
    //do stuff 
}); 
$('.slick').bind('DOMNodeRemoved', function(e) { 
    //do stuff 
}); 

oder MutationObserver

function mutation(mutations) { 
    mutations.forEach(function(mutation) { 
    if (mutation.type === "childList") { 
     if (mutation.addedNodes.length) { 
     //do stuff 
     } 
     else if (mutation.removedNodes.length) { 
     //do stuff 
     } 
    } 
    }); 
} 

var observer = new MutationObserver(mutation); 
observer.observe(elem, { 
    attributes: true, 
    childList: true, 
    characterData: true 
}); 

Answer 2

Es gibt eine init Veranstaltung, wo Sie die Anzahl der Dias ziemlich leicht greifen können. Ich benutzte das in einer Geige, um zu tun, was ich denke, dass Sie suchen.

Ich verwende nicht "wenn die Pfeile sichtbar sind", verwende ich "Anzahl der Folien vs Folien, um Einstellung anzuzeigen" (wenn das Sinn macht). (Beachten Sie auch, dass es hier keine Pfeile gibt, aber Sie können die oberste ziehen).

Überprüfen Sie die Geige: https://jsfiddle.net/2kb8vmyv/

Und der init Code Ereignis Ich verwende:

$el.on('init', function(event, slick, direction) { 
     var slideCount = slick.$slides.length; 
     if (slideCount <= show) { 
      $('.expand[data-for="' + selector + '"]').hide(); 
     } 
    });