I'm using carouFredSel to create multiple carousels on the same page. If you look at this JSFiddle you will see that there are two carousels, but only one is able to be scrolled with the next / prev buttons.

Without adding a class or ID, I am trying to tell the buttons to only scroll the corresponding carousel. I believe this be accomplished with a function, but I'm not entirely sure how. Something like this:

prev: {
    button: function() {
        $(this).next('.prev');
        }
},

I'm using carouFredSel to create multiple carousels on the same page. If you look at this JSFiddle you will see that there are two carousels, but only one is able to be scrolled with the next / prev buttons.

Without adding a class or ID, I am trying to tell the buttons to only scroll the corresponding carousel. I believe this be accomplished with a function, but I'm not entirely sure how. Something like this:

prev: {
    button: function() {
        $(this).next('.prev');
        }
},

• javascript
• html
• css

• I should mention, the reason I do not want to use a class or ID to solve this problem is because I am generating these columns with WordPress. Since all the columns will have the same properties, I would prefer not to repeat code. – colindunn Commented Mar 2, 2012 at 21:25

3 Answers 3

Give this a look, it's right in the documentation:

prev: {
    button: function() {
        return $(this).parent().siblings(".prev");
        }
    },
next: {
    button: function() {
        return $(this).parent().siblings(".next");
        }
    }

Working JSFiddle demo

oh and notice, I took out the key, because then you would have to have the carousels synchronized... and you can have one or the other, not both. (unless you conditionally assigned keys, but there goes your small code)

--
http://caroufredsel.frebsite.nl/code-examples/configuration.php search: "Get the HTML-elements for the buttons and the container dynamically"

I think thats better set an ID.

$("#list1").carouFredSel({
    direction: "up",
    auto : false,
    items: 3,
    prev : "#prev1",
    next : "#next1"
});   

$("#list2").carouFredSel({
    direction: "up",
    auto : false,
    items: 3,
    prev : "#prev2",
    next : "#next2"
}); 

See a working demo.

may be this one is usefull for you.in my page its workin good.

prev: {
       button  : ".prev"
},
next: {
       button  : ".next"
},