Question

I have set up jcarousel with external controls. When I ‘mouseover’ a link in my ‘controls’-list, the carousel scrolls to the according image.

So far everything works fine, but when I ‘mouseover’ the different ‘controls’-links to quickly, it gets stuck at the first link and waits for the scroll-animation to finish.

// SCROLL TO LINK
$('#controls a').on('mouseover',function() {
var opt = $('#controls a').index(this)+1; 
carousel.scroll($.jcarousel.intval(opt)); 
}); 

I’m not sure but I think I have to stop the running scroll animation on ‘mouseover’ to solve this problem.

I tried these lines (which DON’T work):

carousel.stop(true);

and:

carousel.scroll.stop(true);

Can anybody help me with this? There’s probably an easy solution but I’m not experienced with jQuery or programming in general.

Answer 1

Had the same problem. Found very simple solution.
Put it in “jquery.jcarousel.js”

/**
 * Stop animates the carousel, jump To End (animate Slide).
 *
 * @method animate
 * @return undefined
*/
stopAnimate: function() {
this.list.stop(true,true,true);
},

after this

 /**
 * Animates the carousel to a certain position.
 *
 * @method animate
 * @return undefined
 * @param p {Number} Position to scroll to.
 * @param a {Boolean} Flag indicating whether to perform animation.
 */
animate: function(p, a) {
    -/-/-/-/(several strings)
},

my //scroll to link// looks like (i have addition autoScrolling)

$('#controls a').hover(function() {
        var opt = $("#controls a").index(this) + 1;
        carousel.scroll(opt);
        carousel.stopAuto();//autoScroll Stop
    }, function() {
        carousel.stopAnimate(); //! here is located our function
        carousel.startAuto();//autoScroll Start
    });

Maybe someone finds it useful!