Slick.JS pauseOnHover 事件答案

【问题标题】：Slick.JS pauseOnHover EventSlick.JS pauseOnHover 事件
【发布时间】：2021-12-28 06:05:43
【问题描述】：

如果我将 pauseOnHover 设置为 true，如何在滑块暂停时始终触发事件？当滑块未暂停时？我试过了：

$('.slider-element').hover(function(){}).mouseleave(function(){})

但它与“pauseOnHover”不匹配

【问题讨论】：

请提供该问题的工作示例。如果您包含问题的可重现示例，您将有更高的机会获得答案，因此人们不必先创建它。

标签： javascript jquery slick.js

【解决方案1】：

你只需要使用jQuery悬停事件，默认情况下滑块会暂停，但你仍然可以将它包含在滑块的选项中。

$('.slick').hover(function() {
  console.log('slider is paused');
  }, function() {
  console.log('slider will resume again');
});

下面是一个工作示例：

如何使用slickPause 和slickPlay，结合mouseover 和mouseleave 似乎工作正常。

您也可以使用jQuery 内置的hover 函数，但是您使用的回调错误。欲了解更多信息，请查看： https://api.jquery.com/hover/

有关如何使用 slick 方法的更多信息：https://github.com/kenwheeler/slick/#methods

$('.slick').slick({
  autoplay: true,
  autoplaySpeed: 1000,
  pauseOnHover: true // you don't need to specify this, as it is the default value
});

// MOUSEOVER AND MOUSELEAVE

/*$('.slick').on('mouseover', function() {
  $(this).slick('slickPause');
  console.log('slider is paused');
});

$('.slick').on('mouseleave', function() {
  $(this).slick('slickPlay');
  console.log('slider can resume');
});*/

// JQUERY BUILT-IN HOVER

$('.slick').hover(function() {
  $('body').addClass('orange');
  }, function() {
  $('body').removeClass('orange');
});

.orange {
  background: orange;
}

.slide {
  background: #333;
  color: #fff;
  line-height: 200px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="slick">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
</div>

【讨论】：

很遗憾，我无法使用该选项。它必须是 pauseOnHover 而不是 slickPause 和 slickPlay..
@Pedro，请详细说明原因。
@Pedro，您可以找到一个工作示例，您只需要获取悬停事件，当发生这种情况时，您就知道滑块将被暂停。