Question

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

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

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

if(slickArrowsAreVisible) {
  do stuff
}

任何人都有任何想法如何实现这一目标？

Answer 1

有一个init活动，您可以轻松获取幻灯片的数量。我用这个小提琴去做我认为你正在寻找的东西。

我没有使用＆＃34;如果箭头是可见的＆＃34;，我使用＆＃34;幻灯片与幻灯片的数量来显示设置＆＃34; （如果这是有道理的）。（另请注意，此处没有箭头，但您可以拖动顶部箭头。）

检查小提琴：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
});

隐藏/显示内容取决于是否显示光滑导航箭头

2 个答案: