Slick.JS pauseOnHover 事件

Posted 2023-05-07

【中文标题】Slick.JS pauseOnHover 事件

【英文标题】：Slick.JS pauseOnHover Event

【发布时间】：2021-12-28 06:05:43

【问题描述】：

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

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

但它与“pauseOnHover”不匹配

【问题讨论】：

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

【参考方案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，您可以找到一个工作示例，您只需要获取悬停事件，当发生这种情况时，您就知道滑块将被暂停。