javascripthtmlangularjsslick.js

Slick - How to use Pause on Hover?;;


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

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

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