Question

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

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

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

UPDATE！

这是我更新的笔，滑块工作：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'));
});

这将获取每个滑块中的最后一个图像并将其预先添加到列表中，以便后退按钮起作用。如果图片宽度/高度/数量不同，或者您选择实施复选框autoscroll，则会遇到其他问题。

要解决这些问题，你需要在js中实现一个更好的结构，这样每个滑块都有它自己的变量。我真的没有时间经历并设置，对不起。

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

1 个答案: