jquery - 非宽度特定的 jquery 轮播

Question

我正在尝试使这个 jquery 轮播以不同的宽度工作。现在，在它重复之前，末尾有一堆空白。

我怎样才能清除最后的空白？

这是我的jsfiddle。

http://jsfiddle.net/A4sZb/

Answer 1

怎么了

轮播通过显示图标的水平列表来工作。旋转图标时，轮播只是使用 CSS 左右移动列表。最后出现空白是因为您将所有列表元素都放在左侧。然后，当您再次单击“下一步”时，您的所有元素都会移回最右侧。

如何修复它

就像 Dutchie432 所说，您需要重新附加屏幕外项目。从头开始获取元素并使其再次显示在末尾的功能不是您可以仅通过 CSS 修改来完成的；您需要编写一些 JavaScript/jQuery 代码来实际修改 DOM。

示例实现

使用 jQuery，您可以使用:firstor:last选择器选择列表中的第一个或最后一个项目。当用户单击“下一步”时，选择第一个列表元素，将其删除，并将其附加到轮播列表的末尾。像这样循环您的列表元素必须在您完成动画转换后进行。显然，您需要通过某种方式检查第一个/最后一个项目是否在移动之前不再可见。此外，您需要确保一旦删除第一个项目并将其放在最后，您将移动列表元素以补偿丢失的图像宽度。