4

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.

dahannes
  • 43
  • 1
  • 5

3 Answers3

5

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!

Renjith K N
  • 2,613
  • 2
  • 31
  • 53
Ocean
  • 66
  • 1
  • 2
2

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.

Wade
  • 21
  • 1
  • this will stop the carousel but also reset it to initial state. Any idea how to only stop and leave at current state? – flaudre Feb 27 '17 at 10:10
0

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.

Mike D3ViD Tyson
  • 1,701
  • 1
  • 21
  • 31