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

Answer 1

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
});

Answer 2

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

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