多个滑块，控制所有滑块的按钮 [英] Multiple sliders, buttons controlling all sliders

问题描述

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

I am trying to use this slider: http://codepen.io/zuraizm/pen/vGDHl

我需要页面上有多个滑块，最多可能有10个.它用于房地产列表页面，这是一个非常轻巧的滑块.

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.

当前，当您按下一步时，它将滑动每个滑块的图像.我知道它的ID问题，但是有一种简单的方法可以解决此问题，而不必使用数十个不同的ID?

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?

更新！

这是我更新的笔，可以使用滑块: http://codepen.io/LukeD1uk/pen /LEKBa ，但似乎每个滑块正在加载UL中的最后一个LI

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

推荐答案

我在想这样的事情...

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

进行选择，以便唯一的全局选择为a.control_next，然后将其余部分的范围限定为实际发生点击的位置.

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

选择超出您想要的内容还有一些其他问题.这是另一个固定点.

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

此

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

成为这个

$('.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.

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

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.

这篇关于多个滑块，控制所有滑块的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！