多个滑块，控制所有滑块的按钮

Question

我正在尝试使用此滑块：http://codepen.io/zuraizm/pen/vGDHl

我需要在页面上有多个滑块，最多 10 个。这是一个属性列表页面，这是一个非常轻的滑块。

当前，当您按下一步时，它会滑动每个滑块的图像。我知道这是一个 ID 问题，但是有没有一种简单的方法来解决这个问题而不必拥有数十个不同的 ID？

更新！

这是我更新的笔，滑块工作：http://codepen.io/LukeD1uk/pen/LEKBa 但似乎每个滑块都在加载 UL 中的最后一个 LI

Answer 1

我在想这样的事情......

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());
});

使唯一的全局选择是a.control_next，然后将其余的范围限定为实际发生点击的位置。

编辑：选择比您想要的更多还有一些其他问题。这是另一个固定位置。

这个

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

变成这样

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

这会获取每个滑块中的最后一张图片并将其添加到列表中，这样后退按钮就会起作用。如果图片宽度/高度/数量不同，或者您选择实现复选框自动滚动，您将遇到其他问题。

要解决这些问题，您需要在 js 中实现更好的结构，以便每个滑块都有自己的变量。我真的没有时间去设置它，抱歉。