javascript - 多个 slider ，控制所有 slider 的按钮

Question

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

我需要在页面上有多个 slider ，最多 10 个，甚至更多。它用于属性列表页面，这是一个非常轻的 slider 。

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

更新!

这是我更新的笔， slider 可以工作:http://codepen.io/LukeD1uk/pen/LEKBa但似乎每个 slider 都在加载 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'));
});

这将获取每个 slider 中的最后一个图像并将其添加到列表中，以便后退按钮可以使用。如果图片宽度/高度/数量不同或者您选择实现复选框自动滚动，您将遇到其他问题。

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