CODEWITHSUNDEEP
jqueryjcarousel
dahannes
dahannes

Reputation: 43

How to stop() jcarousel scroll animation

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.

Upvotes: 4

Views: 3127

Answers (3)

Mike D3ViD Tyson
Mike D3ViD Tyson

Reputation: 1771

from https://sorgalla.com/jcarousel/docs/plugins/autoscroll/reference/api.html:

Starts the autoscrolling:

$('.jcarousel').jcarouselAutoscroll('start');

Stops the autoscrolling:

$('.jcarousel').jcarouselAutoscroll('stop');

I hope this helps.

Upvotes: 0

Wade
Wade

Reputation: 21

I have a similar control using the jCarousel control that shows a particular image when I mouse over certain divs. I was also having the problem where, if a scroll animation was already playing, the carousel would never make it to the new target. Turns out, all I needed to stop the currently playing animation was the following code...

$(.jcarousel).jcarousel('list').finish();

I called this just before specifying a new target and it solved my problem. I hope this helps.

Upvotes: 2

Ocean
Ocean

Reputation: 66

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!

Upvotes: 5

Related Questions