可滚动的 jQuery 工具：屏幕上显示 3 个项目，但一次滚动一个答案

【问题标题】：jQuery Tools Scrollable: 3 Items on screen but scroll one at a time可滚动的 jQuery 工具：屏幕上显示 3 个项目，但一次滚动一个
【发布时间】：2012-05-02 17:35:51
【问题描述】：

我正在使用可滚动的 jQuery 工具来滚动轮播，一次查看三个项目，并以自动滚动和循环方式滚动单个项目。

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

在显示最后一个项目之前，它似乎也要等到中间项目完全显示。

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

对此我有什么办法吗？

【问题讨论】：

标签： javascript jquery css jquery-tools

【解决方案1】：

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

包含项目的元素需要有一个非常大的宽度。尝试像这样添加 CSS：
```
.items {
    width: 20000em;
}
```
实际上，这是使 jQuery Tools Scrollable 正常工作的要求之一，如开发人员的演示页面所述。这样，所有项目都可以显示在一行中，以便在滚动时最后一个项目之后没有可见空间。它是否比需要的大并不重要，只要它永远不会太小。
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。它就像一个魅力。 :)

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

【讨论】：

感谢您的回答。它看起来像我所追求的。我将在早上进行测试并将其标记为已接受。
谢谢，工作！希望这将被 jquerytools 团队改编。

【解决方案2】：

above answer 在技术上是正确的，但是，如果您是从 jQuerytools 站点捆绑下载它，则措辞略有不同。

您可能正在寻找的行是：

l = f.getItems().eq(1).clone().appendTo(h);

应该以与上述答案类似的方式更改为：

l = f.getItems().slice(1,4).clone().appendTo(h);

未经全面测试，使用风险自负。

【讨论】：

【解决方案3】：

如果您想使其可配置，只需添加

circularVisibleItems:1

进入conf对象然后改变

l=f.getItems().eq(1).clone().appendTo(h);

进入

l=e.circularVisibleItems>1?f.getItems().slice(1,e.circularVisibleItems+1).clone().appendTo(h):f.getItems().eq(1).clone().appendTo(h);

您可以定义在哪个滑块中必须克隆多少项目。

【讨论】：