CODEWITHSUNDEEP
jqueryjcarousel
Abhinav Sood
Abhinav Sood

Reputation: 789

Multiple jCarousels, only the last one works as intended

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.

Upvotes: 0

Views: 217

Answers (1)

Dennis
Dennis

Reputation: 32598

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

Upvotes: 1

Related Questions