jQuery Tools Scrollable:屏幕上有3个项目,但一次滚动一个

Question

我正在使用jQuery Tools可滚动旋转木马,一次只能查看三个项目,并以自动滚动和循环方式滚动一个项目.

我用CSS来显示这三个项目.这个工作正常,直到旋转木马到达最后一个项目,它似乎等到它已经超过它以加载以下项目.

在显示最后一项之前,它似乎还要等到中间项完全可见.

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

我能做些什么吗？

Answer 1

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

1. 包含项目的元素需要具有非常大的宽度.尝试添加这样的CSS:

   .items {
       width: 20000em;
   }
   

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

2. jQuery Tools Scrollable实际上是为了一次只显示一个项目而构建的.这意味着您必须更改脚本的代码:

   你可以在这里找到非缩小的脚本.在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工具同时显示多个项目.我也在工作中使用这个解决方案.

   如果您想再次获得缩小版本的脚本,请在更改后使用此缩小器.它就像一个魅力.:)

如果这是您正在寻找的,请考虑将其标记为正确答案.谢谢!