Javascript 根据是否显示平滑的导航箭头隐藏/显示内容

我在一个页面上有两个旋转木马，其中一个用拇指控制主滑块。有时，滑块可能有很多项目，我们希望能够通过单击链接扩展旋转木马，以便所有拇指都可见，而不必使用左右箭头来回导航。再次单击链接时，它会将拇指收拢回转盘

一切都很好。但我想做的是，如果箭头可见，只显示展开/折叠链接，因为有时没有足够的拇指展开任何内容

我已经查看了，但没有看到任何可以用于执行以下操作的内容：

if(slickArrowsAreVisible) {
  do stuff
}

---

有人知道我该如何做到这一点吗？

有一个

init

活动，你可以很容易地获取幻灯片的数量。我用这个来做我认为你在找的事

我没有使用“如果箭头可见”，而是使用“幻灯片数量vs幻灯片显示设置”（如果有意义）。（另外，请注意，此处没有箭头，但您可以拖动顶部的箭头）

检查小提琴：

我使用的

init

事件代码：

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

$el.on（'init'，函数（事件、平滑、方向）{
var slideCount=slick.$slides.length；
如果（slideCount我认为您需要在
slick
carousels中找到一个按钮元素

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

这很有效，但我选择了另一个答案，因为我不知道在不同的屏幕大小下显示了多少个拇指。这是有道理的。另一个答案更直接地回答了您的问题。感谢+1:）