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

Solution 1

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

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

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

Comments

[Mistalis]

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

[Sonny Jayet]

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

[Alex Banman]

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

[Sfili_81]

add some explanation to this answer