Question

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');
        }
},

Answer 1

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”