Escondendo setas em cada extremidade da apresentação de slides usando o jcarousel Lite

Question

Estou usando o Jcarousel Lite, e a documentação pode ser encontrada aqui:http://www.gmarwaha.com/jquery/jcarousellite/

Eu tenho um carrossel que pode ser navegado usando as setas em cada extremidade.

Quero modificar o carrossel para que, no estado inicial antes do usuário clicar para rolar a apresentação de slides, a seta esquerda não esteja presente. A idéia é sensata - não forneça ao usuário um botão que não faça nada, já que o carrossel não é circular e fazê -lo como tal não é uma opção que eles desejam. Da mesma forma, eles preferem que, no final do carrossel, a seta direita desapareça indicando que o usuário só pode prosseguir na direção oposta.

Para resumir:

1. O estado inicial de partida do carrossel só tem a seta direita visível, indicando ao usuário que o rolagem deve prosseguir apenas em uma direção.

2. Centro-de-carousel, ambas as setas devem estar presentes para que o usuário possa rolar em qualquer direção.

3. Quando, no final do carrossel, sem mais itens para rolar, a seta direita deve ser visível e a seta esquerda não deve, indicando ao usuário que eles só podem proceder da maneira que vieram pelo carrossel.

Editar [14/10/2010]: Acontece que a documentação na página da web jcarousel Lite não inclui menção a esse recurso, enquanto a documentação original do plug -in do jcarousel. Parece que esse recurso não foi algo despojado; Presumi que o plug -in era uma versão despojada de que os recursos seriam explicitamente definidos na documentação.

Tl; dr: Assim como o JCAROUSEL, o JCAROUSEL LITE fará isso automaticamente para você.

Answer 1

Parece ser uma correção muito simples:

1. Adicione uma classe "desativada" ao seu prev IMG:

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

2. Adicione este pedaço de CSS:

   img.disabled { visibility: hidden; }
   

O script de carrossel gerencia a classe "desativada" uma vez ativada.

Answer 2

Você precisa fazer isso:

$(".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 {visibilidade: Hidden; }