Ausblenden von Pfeilen an beiden Enden der Diashow mit jCarousel Lite

Question

Ich bin mit jCarousel Lite und die Dokumentation finden Sie hier: http://www.gmarwaha.com/jquery/jcarousellite/

Ich habe ein Karussell, das mit den Pfeilen an beiden Enden navigiert werden kann.

Ich mag das Karussell so modifizieren, dass im Anfangszustand, bevor der Benutzer klickt die Diashow blättern, ist der linke Pfeil nicht vorhanden. Die Idee ist, eine vernünftige ein - nicht bieten dem Anwender eine Taste, die nichts tut, da das Karussell nicht kreisförmig ist und es als solches zu machen, ist keine Option, die sie wollen. Ebenso würden sie es so lieber, dass am Ende des Karussells, verschwindet der Pfeil nach rechts, was anzeigt, dass der Benutzer nur in der entgegengesetzten Richtung gehen kann.

Um es zusammenzufassen:

1. Anfängliche Startzustand des Karussells hat nur das Recht sichtbar Pfeil den Benutzer anzeigt, dass die Scroll nur in eine Richtung gehen muss.

2. Mid-Karussell, müssen beiden Pfeile vorhanden sein, so dass der Benutzer in der Lage ist, in beiden Richtungen zu scrollen.

3. Wenn am Ende des Karussells mit nicht mehr Gegenstände zu blättern, muss der Pfeil nach rechts sichtbar sein und der linke Pfeil darf nicht an den Benutzer darauf hinweist, dass sie nur den Weg gehen zurück, den sie durch die kam Karussell.

Bearbeiten [10/14/2010]: Es stellt sich heraus, dass die Dokumentation auf der jCarousel Lite Webseite beinhaltet nicht Erwähnung dieser Funktion während der ursprünglichen jCarousel Plugin Dokumentation der Fall ist. Es scheint, diese Funktion wurde nicht etwas abgestreift; Ich nahm an, weil das Plugin eine gestrippt Version war, dass die Funktionen explizit in der Dokumentation definiert würden.

TL; DR :. Ähnlich wie jCarousel, jCarousel Lite wird dies automatisch für Sie tun

Answer 1

Es scheint eine sehr einfache Lösung zu sein:

1. Fügen Sie eine "disabled" Klasse Ihren prev img:

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

2. Fügen Sie diese wenig CSS:

   img.disabled { visibility: hidden; }
   

Das Karussell Skript verwaltet die "disabled" Klasse einmal aktiviert.

Answer 2

Sie müssen dies tun:

$(".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-i.Vj., .jcarousel-next {       Sichtbarkeit: hidden; }