Slick - How to use Pause on Hover?

Question

I'm working on an AngularJS app, I want to use Slick to have a carousel to display images.

Simplified, my HTML looks like this:

<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>

I have buttons linked to my controller.js's functions to pause / resume the slick carousel, this is working fine.

The problem is that the carousel is not autoplaying when my mouse is over (hover ) the images section. The setting "pauseOnHover" is set to false so I don't understand why it's not autoplaying when my mouse is in...

Inflame

Answer 1

pauseOnHover should be written pause-on-hover when using the attribute notation:

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

Whyalla

Answer 2

User pauseOnHover:false on slick config

for example:

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

Mamoun

He is asking for exactly the opposite of what you said. – Whyalla

I was wrong with the syntax of the setting , I was using "pauseOnHover" on the html tag , instead of "pause-on-hover" ( thx Mistalis ), I didnt get that "pauseOnHover" is for JS use only – Inflame

This worked perfectly for what I was trying to achieve. Thanks. – Fancywork

Answer 3

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

Toxic

add some explanation to this answer – Recorder

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>

Midshipmite

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Alialia