Slick.JS pauseOnHover 事件

Question

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

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

但它与“pauseOnHover”不匹配

Answer 1

<* --- 更新 --- *>

您只需要使用 jQuery hover 事件，默认情况下 slider 将暂停，但您仍然可以将其包含在 Z10BF08F0BBDAE4618BD94 的选项中

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

下面是一个工作示例：

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

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

有关如何使用光滑方法的更多信息： 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>