Multiple Sliders, Buttons Controlling All Sliders

I am trying to use this slider: http://codepen.io/zuraizm/pen/vGDHl I need to have multiple sliders on the page, up to 10 maybe more. It is for a property listings page, and this i

Solution 1:

I was thinking something like this...

function moveRight(slider) {
    slider = $(slider);
    slider.find('ul').animate({
        left: - slideWidth
    }, 200, function () {
        slider.find('ul li:first-child').appendTo(slider.find('ul'));
        slider.find('ul').css('left', '');
    });
};

$('a.control_next').click(function () {
    moveRight($(this).parent());
});

Makes it so that the only global selection is a.control_next and then the rest are scoped to where the click actually happened.

EDIT: There are some additional issues with selecting more than you want. Here's another fixed spot.

This

$('#slider ul li:last-child').prependTo('#slider ul');

Becomes this

$('.slider').each(function(slider){
  slider = $(slider);
  slider.find('ul li:last-child').prependTo(slider.find('ul'));
});

This takes the last image in each slider and prepends it to the list so the back button will work. You will run into additional issues if the picture width/height/count differ or if you choose to implement the checkbox autoscroll.

To fix those though you would need to implement a much better structure in the js so that each slider has it's own variables. I don't really have the time to go through and set that up, sorry.