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 is a really light slider.

Currently when you press next, it slides the images for every slider. I know its an ID issue, but is there a simple way to fix this without having to have tens of different id's?

UPDATE!

This is my updated pen, with the sliders working: http://codepen.io/LukeD1uk/pen/LEKBa But it appears each slider is loading the last LI in UL

回答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.

来源：https://stackoverflow.com/questions/24370661/multiple-sliders-buttons-controlling-all-sliders