jCarousel - how to get pause on hover with autoscroll?

我与影子孤独终老i 提交于 2019-11-27 18:08:54

问题


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


回答1:


add this code into your jcarousel initCallback(carousel)

 carousel.clip.hover(function() {
    carousel.stopAuto();
}, function() {
    carousel.startAuto();
}); 



回答2:


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');
    });
});



回答3:


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');
});



回答4:


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' );
            })

  });


来源:https://stackoverflow.com/questions/8884610/jcarousel-how-to-get-pause-on-hover-with-autoscroll

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!