Hide/display 内容取决于是否显示 Slick 导航箭头

Question

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

一切正常。如果箭头可见，我想做的只是显示 link 到 expand/collapse，因为有时没有足够的拇指来展开任何东西。

我已经查看了 events and methods，但没有看到任何我可以用来做类似事情的东西：

if(slickArrowsAreVisible) {
  do stuff
}

有人知道我如何完成这个吗？

Answer 1

有一个 init 事件，您可以在其中轻松获取幻灯片的数量。我在 fiddle 中使用它来完成我认为您正在寻找的东西。

我没有使用 "if the arrows are visible"，我使用的是 "number of slides vs slides to show setting"（如果这有意义的话）。（另请注意，此处没有箭头，但您可以拖动滑动顶部的箭头）。

勾选 fiddle: https://jsfiddle.net/2kb8vmyv/

而且，我正在使用的 init 事件代码：

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

Answer 2

我认为您需要在 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
});

Hide/display 内容取决于是否显示 Slick 导航箭头

Hide/display content depending on whether Slick navigation arrows are showing

javascript

jquery

slick.js