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

Question

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

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

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

总结一下：

1. 轮播的初始启动状态只有右箭头可见，向用户指示滚动只能沿一个方向进行。

2. 在轮播中间，两个箭头都必须存在，以便用户能够向任一方向滚动。

3. 当在轮播结束时没有更多项目可以滚动时，右箭头必须可见，而左箭头不能，向用户表明他们只能按照他们通过轮播的方式返回。

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

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

Answer 1

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

1. prev在您的img中添加一个“禁用”类：

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

2. 添加这一点CSS：

   img.disabled { visibility: hidden; }
   

一旦激活，轮播脚本就会管理“禁用”类。

Answer 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();
                }
 });

Answer 3

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