javascript - jQuery 工具可滚动 : 3 Items on screen but scroll one at a time

Question

我正在使用 jQuery Tools scrollable 来实现一次显示三个元素的轮播，并以自动滚动和循环方式滚动一个元素。

我已经使用 CSS 来显示这三个元素。这在轮播到达最后一个元素之前工作正常，它似乎要等到它经过它才能加载以下元素。

在显示最后一个元素之前，它似乎也在等到中间元素完全可见。

演示在这里: http://jsfiddle.net/pgxSm/6/

我能做些什么吗？

Answer 1

是的，你可以。我遇到了同样的问题。

1. 包含元素的元素需要有很大的宽度。尝试像这样添加 CSS:

   .items {
       width: 20000em;
   }
   

   实际上，如开发人员的演示页面所述，这是使 jQuery Tools Scrollable 正常工作的要求之一。这样所有元素都可以显示在一行中，滚动时最后一个元素之后没有可见空间。它是否大于所需并不重要，只要它永远不会太小即可。

2. jQuery Tools Scrollable 实际上被构建为一次只显示一个元素。这意味着您必须更改脚本的代码:

   您可以找到非缩小脚本 here .在 Scrollable 脚本中搜索显示

   的行

   cloned2 = self.getItems().eq(1).clone().appendTo(itemWrap);
   

   将其替换为这一行:

   cloned2 = self.getItems().slice(1,4).clone().appendTo(itemWrap);
   

   通过这种方式，您可以克隆前 3 个元素(而不是仅第一个元素)并将其添加到元素的末尾，这样即使一次可以看到多个元素，也可以进行循环滚动。如果您希望一次显示更多元素，只需将 4 替换为 [number of visible items] + 1。 Afaik，没有其他方法可以让 jQuery 工具同时处理多个元素。我也在工作中使用这个解决方案。

   如果你想再次获得脚本的缩小版本，在你的更改之后，只需使用这个 minifier .它就像一个魅力。 :)

如果这是您要查找的内容，请考虑将其标记为正确答案。谢谢!