javascript - 根据 Slick 导航箭头是否显示来隐藏/显示内容

Question

我有两个 Slick页面上的旋转木马，其中一个带有控制主 slider 的拇指。有时 slider 可能有很多项目，我们希望能够通过单击链接来扩展轮播，以便所有缩略图都可见，而不必使用左右箭头来回导航。当您再次单击该链接时，它会将拇指缩回到轮播中。

一切正常。不过，我想做的只是在箭头可见时显示展开/折叠的链接，因为有时没有足够的拇指来展开任何内容。

我已经查看了 events和 methods但看不到任何我可以用来做类似事情的东西:

if(slickArrowsAreVisible) {
  do stuff
}

有谁知道我如何实现这一点？

Answer 1

我认为您需要在 slick 轮播中找到一个按钮元素。按照这段代码，

//arrow doesn't exist
if (slick_instance.find('button.slick-arrow').length == 0) {
    //do stuff
  alert('No arrow');
}
//arrow exists
else {
    //do stuff
  alert('arrow');
}

以上代码，仅在按钮元素处于domready状态时有效。如果按钮元素动态创建或销毁，您可以使用 MutationObserver 或 DOMNodeInserted。

如果您使用 DOMNodeInserted

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

或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
});