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
add this code into your jcarousel initCallback(carousel)
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
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');
});
});
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');
});
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' );
})
});