Clever Geek Handbook

Slick - How to use Pause on Hover?

I am working on an AngularJS application, I want to use Slick to have a carousel for displaying 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 functions to pause / resume carousel, this works fine.

The problem is that the carousel doesn't autoplay when my mouse has finished (hover) the image section. The "pauseOnHover" parameter is set to false, so I don't understand why it doesn't autoplay when my mouse is on ...

+3


source to share


2 answers


pauseOnHover

should be written pause-on-hover

when using attribute notation:



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


source


User pauseOnHover:false

on slick config

eg:



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


source






More articles:


All Articles