Multiple Sliders On One Page

Ok, I builded a slider in javascript and Jquery (with help of you guys) But now I want to have multiple sliders on 1 page. While using just one javascript. BUT...the slider can be

Solution 1:

This should be fine:

(function($) {
    $('#temp #container').each(function(){
        var slider = $(this).find('#slider'),
        parent = $(this),
        step = 500,
        left = parseInt(slider.css('left'), 10),
        max = parent.width() - slider.width(),
        min = 0;

    parent.find("#left").click(function() {
        if (left > max) {
            var newLeft = left - step;
            left = (newLeft>max) ? newLeft : max;
            slider.animate({
                "left": left + 'px'
            }, "slow");
        }
    });

    parent.find("#right").click(function() {
        if (left < 0) {
            var newLeft = left + step;
            left = (newLeft<min) ? newLeft : min;
            slider.animate({
                "left": left + 'px'
            }, "slow");
        }
    });
});
})(jQuery);​

FIDDLE

Solution 2:

In theory you could do some code which can take a selector to a wrapper element (which has the required slider elements inside) as some parameter. And then you can from this element create selectors which are more dynamic. I'm not sure where you get "step = 500" from, but that's maybe something you could grab dynamically from some relevant element.