jquery - jCarouselLite: Pause Scrolling on hover

Question

I'm using jCarouselLite and everythig is working fine. However I want that the auto scrolling paused once I hover over the carousel.

The jCarouselLite doco is saying that I can use this:

$('div.carousel').trigger('pauseCarousel')

But I don't understand much about jQuery. How can I implement that pause function in the following code?:

<script>
jQuery(function() { 
    jQuery(".carousel").jCarouselLite({
        auto: 3000,
        speed: 1000,
        visible: 1,
        circular: true,
        autoWidth: true,
        responsive: true,
        vertical: true
   });
});
</script>

Thanks

Answer 1

您可以将jQuery.mouseover()函数链接到您的jCarouselLite对象实例化，如下所示：

$('div.carousel').jCarouselLite({
  btnNext: '.next',
  btnPrev: '.prev',
  auto: 3,
  speed: 500
}).mouseover(function(){
  $(this).trigger('pauseCarousel');
});

此小提琴提供现场演示。当您将鼠标悬停在轮播上时，水平滚动将暂停。鼠标离开时，滚动将自动恢复。