Ocultación de flechas en cada extremo de la presentación de diapositivas usando jCarousel Lite

Question

Estoy utilizando jCarousel Lite, y la documentación se puede encontrar aquí: http://www.gmarwaha.com/jquery/jcarousellite/

Tengo un carrusel que puede ser navegado utilizando las flechas en cada extremo.

Quiero modificar el carrusel de modo que en el estado inicial antes de que el usuario hace clic para desplazarse por la presentación de diapositivas, la flecha izquierda no está presente. La idea es sensata - no proporcionan al usuario un botón que no hace nada, ya que el carrusel no es circular y por lo que es, como tal, no es una opción que ellos quieren. Asimismo, prefieren de modo que al final del carrusel, la flecha derecha desaparece lo que indica que el usuario sólo puede proceder en la dirección opuesta.

Para resumir:

1. estado de inicio inicial del carrusel sólo ha visibles en la flecha derecha que indica al usuario que el desplazamiento sólo se debe proceder en una dirección.

2. Mid-carrusel, ambas flechas debe estar presente para que el usuario es capaz de desplazarse en cualquier dirección.

3. Cuando al final del carrusel sin más elementos para desplazarse a través de la flecha hacia la derecha debe ser visible y la flecha izquierda no debe, que indica al usuario que sólo puede proceder de vuelta por donde entró por el carrusel.

Editar [10/14/2010]: Resulta que la documentación en la página web jCarousel Lite no incluye mención de esta característica, mientras que el plug-in de documentación original, jCarousel hace. Parece que esta característica no fue algo quitó; Supuse debido a que el plug-in era una versión simplificada que las características se definen explícitamente en la documentación.

TL; DR . Al igual que jCarousel, jCarousel Lite lo hará automáticamente para usted

Answer 1

Parece ser una solución muy simple:

1. Añadir una clase de "discapacitado" a tu img prev:

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

2. Añadir este pedazo de CSS:

   img.disabled { visibility: hidden; }
   

El script carrusel gestiona la clase "desactivado" una vez activado.

Answer 2

Es necesario hacer esto:

$(".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-ant, junto .jcarousel-{       visibility: hidden; }