Question

I am trying to have multiple jCarousels on one page: http://abhinavsood.com/labs/jquery/jcarousel-autoscroll-both-directions/test.html – The working of the carousel is explained on the page.

My problem is that the second (or the last, in case of multiple carousels) works as intended. Hovering over the controls next and previous controls of the first carousel also make the second carousel rotate. I want to have them work independently. The culprit is this code in line 59 to line 70, if you view the source.

Please help me out of it, I’d greatly appreciate your help.

Answer 1

You are selecting all .jcarousel-next and .jcarousel-prev elements in your init function. Try binding to the carousel.buttonNext elements to localize it to the currently initialized carousel.

 carousel.buttonNext.bind('mouseenter', function() {
     carousel.startAuto(1.00);
 });

 carousel.buttonPrev.bind('mouseenter', function() {
     carousel.startAuto(-1.00);
 });

 carousel.buttonPrev.add(carousel.buttonNext).bind('mouseleave', function(){
     carousel.stopAuto();
 });