0

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

HomTom
  • 558
  • 1
  • 4
  • 12

1 Answers1

-1

You can chain the jQuery.mouseover() function to your jCarouselLite object instantiation like this:

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

Live demo available at this fiddle. When you mouse-over the carousel, the horizontal scrolling will pause. On mouse leave, the scrolling will resume automatically.

ivan.sim
  • 8,972
  • 8
  • 47
  • 63
  • Thanks, but it doesn't work for me. The live demo doesn't work either. – HomTom Nov 09 '14 at 02:28
  • It looks like the `http://plugins.learningjquery.com/jcarousellite/src/jquery.jcarousellite.js` file is not loading up properly on jsfiddle. – ivan.sim Nov 09 '14 at 05:59
  • Have you tried updating your codes with my changes? The carousel should start scrolling horizontally. When your mouse over it, it will pause the scrolling, then resume on mouse-out. If you really want to see the fiddle works, you will have to navigate to the js file link I posted above, refresh your browser, so that your browser can cache the js. – ivan.sim Nov 09 '14 at 06:11