如何为单个项目正确初始化jQuery工具的可滚动组件？

Question

我创建了一个使用jQuery Tools' Scrollable组件的网页，该页面基于最小设置演示。正如在这个演示中一样，我的页面也使用了可滚动项，其中有容纳5张缩略图的空间，但是当我的页面第一次加载时，我只想要一个只包含3张缩略图的可滚动项，剩下的两个图像槽是空的。我假设我可以简单地将演示中的三个可滚动的项目div替换为一个可滚动的项目div，一切看起来都很好，但是当我这样做时，我最终看到不可操作的左/上一个和右/下一个图标，即使没有上一个或下一个可滚动的项目。

我在jsfiddle网站上有一个我想做的例子。它本质上是上面引用的演示，不适用的可滚动项目div和子图像注释掉。

我如何初始化可滚动的，这样我只有一个可滚动的项目在页面上没有不适用的左/上一个和右/下一个图标出现?

提前感谢您的帮助、建议等

Answer 1

我能想到的最好的是

if($(".scrollable .items div").length < 2) $("a.browse").hide();

Answer 2

我希望浏览按钮默认隐藏，然后只在需要时显示它们。

css默认a.browse为visibility: hidden

然后在初始化中:

$(".scrollable").scrollable().each( function() {
  var scroller = $(this).data("scrollable");
  scroller.getNaviButtons().css('visibility', 'visible');
  if (scroller.getSize() <= 1) {
    scroller.getNaviButtons().addClass('disabled');
  }
});

这看起来有点粗糙，但是可以避免在浏览按钮不被看到的情况下临时显示它们