9

JCarousel have recently changed (january 2011).
It used to have a way to implement pause on hover with autoscroll.

With the new version I cannot solve how to get autoscroll to stop on hover:
I would like the scroll to stop on mouseover and start again on mouseout.
Any suggestions?

Example code is here - http://testsite3.dk/jcarousel/
Jcarousel here: github.com/jsor/jcarousel

Link to JQuery + javascript to load thumbs here - http://testsite3.dk/jcarousel/autoscroll.txt

user1152435
  • 91
  • 1
  • 1
  • 3
  • This issue has been fixed. Please take a look: http://code.google.com/p/jcarausel-lite-pause-on-hover-fixed/ – saikatbiswas82 May 23 '12 at 15:07
  • @saikatbiswas82 Your version of jcarousellite doesn't seem to work. – Muhd Nov 26 '12 at 22:19
  • 1
    For those looking to implement this in jcarousellite, see http://stackoverflow.com/questions/8013595/autoslide-jquery-jcarousel-lite-not-working – Muhd Nov 26 '12 at 22:24

4 Answers4

13

add this code into your jcarousel initCallback(carousel)

 carousel.clip.hover(function() {
    carousel.stopAuto();
}, function() {
    carousel.startAuto();
});
mkp
  • 141
  • 1
  • 3
6

I couldn't get the previous examples working. But I did get the following to work with the latest jcarousel.

$('.carousel').jcarouselAutoscroll(
{
    interval: 4000, 
    scroll: '+=1',
    create: $('.carousel').hover(function() 
    {
        $(this).jcarouselAutoscroll('stop');
    },
    function() 
    {
        $(this).jcarouselAutoscroll('start');
    });
});
Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
Rona Kilmer
  • 169
  • 2
  • 6
  • Tried this and get `Uncaught Error: Cannot call methods on jcarouselAutoscroll prior to initialization; attempted to call method "stop"` – Howdy_McGee Apr 14 '14 at 15:27
  • @Howdy_McGee you had to call `$('.carousel').jcarousel();` prior to calling $('.carousel').jcarouselAutoscroll(); – metamaker Jul 29 '17 at 21:23
1

Updating the answer to stay current.

See https://github.com/jsor/jcarousel/issues/568 for the correct answer:

$('.jcarousel').hover(function() {
    $(this).jcarouselAutoscroll('stop');
}, function() {
    $(this).jcarouselAutoscroll('start');
});
emd
  • 434
  • 1
  • 7
  • 18
0

You can bind your own hover events in the create callback:

  .jcarouselAutoscroll({
    autostart: true,
    interval: 1000,
    scroll: '+=3',
    create: $('#thumbs').bind('mouseenter', function () {
                $(this).jcarouselAutoscroll('option', 'scroll', '+=0' );
            }).bind('mouseleave', function () {
                $(this).jcarouselAutoscroll('option', 'scroll', '+=3' );
            })

  });
shaunsantacruz
  • 8,903
  • 3
  • 19
  • 19
  • Hi - thanks for your answer. This works like a charm on the demo. It will be used on a site where thumbs are pulled from Vimeo and click on a thumb loads a video on the page. The scroll works fine here too, the videos loads as expected, and the scroll starts and stops on mouseenter and mouseleave. However: if I pause over the thumbs for longer than just a click, something like 5 sek. the scrolling stops but does not start again on mouseleave (?). I have included a link to javascript used to load the thumbs in the question. I cant link to the testsite, sorry, suggestions would be very welcome. – user1152435 Jan 18 '12 at 13:29
  • Is the mouseleave event firing when it's not working as expected? – shaunsantacruz Jan 18 '12 at 19:00
  • If I watch the scrolling in Firebug, I see the rhytm of the scrolling continuing even if the thumbs do not scroll on the screen. This is in both the Example and on the Site. The Example code continues as expected. However on the Site (where the thumbs are loaded from Vimeo) I see the scroll **only once** and then no more. (Consistent with it working only if the hover is not prolonged). Seems like is has to be started again somehow.... – user1152435 Jan 19 '12 at 00:17