jQuery Tools可滚动：屏幕上的3个项目，但一次滚动一个

问题描述

我使用jQuery工具可滚动的一个旋转木马一个视图中有三个项目，并以自动滚动和循环方式滚动一个单一的项目。 CSS显示三个项目。这个工作正常，直到轮播到达最后一个项目，它似乎要等到它已经过去加载在以下项目。

它似乎还等到

在这里演示：

我可以做些什么吗？

解决方案

是的，可以。我有同样的问题。

1. 包含项目的元素需要有一个非常大的宽度。尝试添加CSS如下：

     .items {
    width：20000em; 
   } 
     

   实际上，这是使jQuery Tools Scrollable正常工作的要求之一，因为在开发人员的演示页上。这样，所有项目可以显示在一行中，以便在滚动时在最后一个项目后没有可见的空间。




2. jQuery Tools Scrollable实际上是建立为只显示一个项目，一个时间。这意味着您必须更改脚本的代码：

   
   
   

   您可以找到非缩略脚本。在可滚动脚本中搜索表示

   的行
   
   

     cloned2 = self.getItems（）。eq .appendTo（itemWrap）; 
     

   使用此行替换：

     cloned2 = self.getItems（）。slice（1,4）.clone（）。appendTo（itemWrap）; 
    

   这样，您可以克隆前3个项目（而不是仅第一个项目），并将其添加到结束，使得即使一次可看到多于一个项目，也可以进行圆形滚动。如果您想要一次显示更多项目，只需使用 [可见项目数量] + 1替换 4 + 1 。 Afaik，没有其他方法使jQuery工具与多个项目一次可见。

   
   
   

   如果您想再次获得脚本的缩小版本，请在更改后使用此。它的工作方式像一个魅力。 ：）




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

I am using jQuery Tools scrollable for a carousel with three items in view at a time and scrolling one single item in an autoscrolling and circular fashion.

I have used CSS to show the three items. This works ok until the carousel reaches the last item, it seems to wait until it has gone past it to load in the following items.

It also seems to wait until the middle item is fully in view before displaying the last item.

Demo here:http://jsfiddle.net/pgxSm/6/

Is there anything I can do about this?

解决方案

Yes you can. I've had that very same problem.

1. The element that contains the items needs to have a very large width. Try adding CSS like this:

   .items {
       width: 20000em;
   }
   

   Actually this is one of the requirements to make jQuery Tools Scrollable work properly, as stated on the developer's demo page. This way all items can be displayed in one row to that there is no space visible after the last item while scrolling. It doesn't matter if it's larger than needed, as long as it is never too small.

2. jQuery Tools Scrollable is actually built to only display one item at a time. This means you have to change the code of the script:

   You can find the non-minified script here. Search for the line in the Scrollable script that says

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

   Replace it with this line:

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

   This way you clone the first 3 items (instead of only the first item) and add it to the end of the items, so that circular scrolling is possible even though more than one items are visible at a time. If you want more items to be visible at a time, just replace 4 with [number of visible items] + 1. Afaik, there's no other way to make jQuery tools work with multiple items being visible at a time. I also use this solution at work.

   If you want to get the minified version of the script again, after your changes, simply use this minifier. It works like a charm. :)

If this was what you were looking for, please consider marking it as the correct answer. Thank you!

这篇关于jQuery Tools可滚动：屏幕上的3个项目，但一次滚动一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！