使用 jCarousel Lite 在幻灯片的任一端隐藏箭头答案

【问题标题】：Hiding arrows at either end of the slideshow using jCarousel Lite使用 jCarousel Lite 在幻灯片的任一端隐藏箭头
【发布时间】：2010-10-04 22:05:08
【问题描述】：

我使用的是 jCarousel Lite，文档可以在这里找到： http://www.gmarwaha.com/jquery/jcarousellite/

我有一个旋转木马，可以使用两端的箭头进行导航。

我想修改轮播，以便在用户单击滚动幻灯片之前的开始状态，左箭头不存在。这个想法是明智的——不要为用户提供一个什么都不做的按钮，因为轮播不是圆形的，这样制作并不是他们想要的选择。同样，他们希望这样在轮播结束时，右箭头消失，表示用户只能朝相反的方向前进。

总结一下：

轮播的初始启动状态只有右箭头可见，向用户指示滚动只能沿一个方向进行。
轮播中间，两个箭头都必须存在，以便用户能够向任一方向滚动。
当在轮播结束时没有更多项目可滚动时，右箭头必须可见，而左箭头不得，向用户表明他们只能按照他们通过的方式返回轮播。

编辑 [2010 年 10 月 14 日]： 事实证明，JCarousel Lite 网页上的文档没有提及此功能，而原始的 jCarousel 插件文档则有。似乎这个功能并没有被剥离；我假设因为该插件是一个剥离版本，所以这些功能将在文档中明确定义。

TL;DR：与 jCarousel 非常相似，jCarousel Lite 会自动为您执行此操作。

【问题讨论】：

希望您不要介意，我更改了问题标题以便于查找。
TL;DR: 在你的 CSS 中添加 .disabled { visibility:hidden; }

标签： javascript jquery jcarousel jcarousellite

【解决方案1】：

这似乎是一个非常简单的修复：

向您的prev img 添加一个“禁用”类：

<img class="prev disabled" src="images/projects-prev.png" />

添加这段 CSS：
```
img.disabled { visibility: hidden; }
```

轮播脚本在激活后管理“禁用”类。

【讨论】：

将此标记为最佳答案，因为它是最优雅的。
如何将相同的功能应用到下一个按钮？
@Dinesh 轮播插件本身在到达第一个或最后一个面板时将disabled 类添加到箭头。所以上面的答案只是在初始状态下隐藏箭头——如果我没记错的话。
任何想法如何在 IE6 中处理这个问题，因为我不能做 img.disabled

【解决方案2】：

你需要这样做：

$(".projects-slideshow").jCarouselLite({
  btnNext: "#projects .next",
  btnPrev: "#projects .prev",
  visible: 4,
  circular: 0,
                beforeStart: function() {
                $("#projects .prev").hide(); //$(this.btnPrev).hide(); may work and is neater
                },
                afterEnd: function() {
                $("#projects .next").hide();
                }
 });

【讨论】：

也是一个有效的解决方案，所以给你一个热烈的投票 - 确实将另一个解决方案标记为更优雅，因此获得了最佳投票。不过还是谢谢你。 :)

【解决方案3】：

.jcarousel-prev, .jcarousel-next { 可见性：隐藏； }

【讨论】：