Slick - 如何在悬停时使用暂停？

Question

我正在开发一个AngularJS应用程序，我想使用Slick来创建一个轮播图展示图片。

简而言之，我的HTML代码如下：

<slick pauseOnHover="false"  autoplay="true" autoplaySpeed="1000" dots="true" touch-move="false" slides-to-show="3" speed="400" slides-to-scroll="1" ng-if="main.CarouselReady" infinite="true" class="slickCarousel">
    <div ng-repeat="img in main.myImages">
        <img src="{{img.src}}" />
    </div>
</slick>

我有一些按钮与我控制器(controller.js)的函数链接，用于暂停/恢复图片轮播, 目前运行正常。但是问题在于：当我的鼠标位于图像区域（hover）时，轮播不会自动播放。设置"pauseOnHover"为false，所以我不理解为什么在鼠标悬停时它不能自动播放...

- Sonny Jayet

Answer 1

在slick配置中使用pauseOnHover:false，例如：

$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true,
  pauseOnHover:false
});

- Arun Kasyakar

---

他所要求的恰恰与你所说的相反。 - Mistalis

我在设置语法上犯了错误，我在HTML标签上使用了“pauseOnHover”，而不是“pause-on-hover”（感谢Mistalis），我没有意识到“pauseOnHover”仅供JS使用。 - Sonny Jayet

这对我想要实现的目标非常完美。谢谢。 - Alex Banman

Answer 2

pauseOnHover应该在使用属性表示法时写成pause-on-hover:

<slick pause-on-hover="false" ...>
    ...
</slick>

- Mistalis

Answer 3

$('.slideshow').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  pauseOnHover: false,
  pauseOnFocus: false,
});

- Oleg Obiukh

---

给这个答案添加一些解释 - Sfili_81

Answer 4

 jQuery(document).ready(function(){
    jQuery('.slick-slider').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 0,
      speed: 3000,
      pauseOnHover: true,
      cssEase: 'linear'
      });
    });  

body {
  align-items: center;
  background: #000;
  color: #fff;
  display: flex;
  height: 100vh;
  flex-direction: column;
  font-family: sans-serif;
  justify-content: center;
  padding: 30px;
  text-align: center;
}

h3 {
  background: #FFF;
  color: #000;
  font-size: 136px;
  line-height: 200px;
  margin: 10px;
  padding: 2%;
  position: relative;
  text-align: center;
}

.slick-slider {
  margin: auto;
  width: 90%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script
      src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script
      src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<ul class="slick-slider">
  <li><h3>1</h3></li>
  <li><h3>2</h3></li>
  <li><h3>3</h3></li> 
  <li><h3>4</h3></li> 
  <li><h3>5</h3></li> 
</ul>

- Alexandre Alves

---

你的回答可以通过添加更多支持信息来改进。请[编辑]以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Ethan