flèches Hiding à chaque extrémité du diaporama à l'aide jCarousel Lite

Question

J'utilise jCarousel Lite et la documentation peuvent être trouvés ici: http://www.gmarwaha.com/jquery/jcarousellite/

J'ai un carrousel qui peut naviguer à l'aide des flèches à chaque extrémité.

Je veux modifier le carrousel de sorte que l'état commence avant que l'utilisateur clique pour faire défiler le diaporama, la flèche gauche n'est pas présent. L'idée est raisonnable un - ne fournit pas à l'utilisateur un bouton qui ne fait rien, puisque le carrousel n'est pas circulaire et ce qui en fait en tant que telle n'est pas une option qu'ils veulent. De même, ils préféreraient en sorte que, à la fin du carrousel, la flèche droite disparaît indiquant que l'utilisateur ne peut procéder dans le sens inverse.

Pour résumer:

1. état de démarrage initial du carrousel a seulement le droit flèche visible indiquant à l'utilisateur que le rouleau ne doit procéder dans une direction.

2. Mi-carrousel, les deux flèches doit être présent pour que l'utilisateur peut faire défiler dans les deux sens.

3. Quand à la fin du carrousel sans plus d'articles pour faire défiler, la flèche de droite doit être visible et la flèche gauche ne doit pas, ce qui indique à l'utilisateur qu'il ne peut procéder de nouveau la façon dont ils sont venus à travers la carrousel.

Modifier [10/14/2010]: Il se trouve que la documentation sur la page Web Lite jCarousel ne comprend pas mention de cette fonction alors que le plug-in jCarousel originale documentation fait. Il semble que cette fonctionnalité n'a pas été quelque chose de dépouillé; Je suppose que le plug-in est une version dépouillée que les caractéristiques seraient explicitement définies dans la documentation.

TL; DR :. Tout comme jCarousel, jCarousel Lite fera automatiquement pour vous

Answer 1

Il semble être une solution très simple:

1. Ajouter une classe "désactivé" à votre prev img:

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

2. Ajouter ce bit CSS:

   img.disabled { visibility: hidden; }
   

Le script carrousel gère la classe "désactivé" une fois activée.

Answer 2

Vous devez faire ceci:

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