Wie kann ich verhindern, dass das letzte Bild in meinem jQuery Infinite Carousel verschwindet?

Question

Ich benutze diese , aber auf eine etwas andere Weise als die Demo, können Sie meine Verwendung here unter der Überschrift 'Customer Success Stories' sehen.

Wie Sie sehen werden, habe ich das Karussell zentriert und erlaubt, dass das vorherige Bild noch sichtbar ist, während das Karussell gescrollt wird. Wenn das Karussell zuerst geladen wird, wird das letzte Bild in der Sequenz nicht geladen, so dass links vom ersten Bild ein weißer Zwischenraum ist. Das letzte Bild verschwindet ebenfalls kurz, sobald das Karussell zum ersten Bild zurückkehrt.

Ich habe versucht, dies oft selbst zu beheben, aber mein jQuery-Wissen fehlt und das Skript reagiert einfach nicht, weiß jemand, wie ich das letzte Bild in der Sequenz zeigen kann, wenn das Karussell lädt und nicht wann verschwinden es erreicht wieder den Anfang? Vielen Dank.

Hier ist die jQuery-Skript:

/** 
* @author Stéphane Roucheray 
* @extends jquery 
*/ 


jQuery.fn.carousel = function(previous, next, options){ 
    var sliderList = jQuery(this).children()[0]; 

    if (sliderList) { 
     var increment = jQuery(sliderList).children().outerWidth("true"), 
     elmnts = jQuery(sliderList).children(), 
     numElmts = elmnts.length, 
     sizeFirstElmnt = increment, 
     shownInViewport = Math.round(jQuery(this).width()/sizeFirstElmnt), 
     firstElementOnViewPort = 1, 
     isAnimating = false; 

     for (i = 0; i < shownInViewport; i++) { 
      jQuery(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px"); 
      jQuery(sliderList).append(jQuery(elmnts[i]).clone()); 
     } 

     jQuery(previous).click(function(event){ 
      if (!isAnimating) { 
       if (firstElementOnViewPort == 1) { 
        jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px"); 
        firstElementOnViewPort = numElmts; 
       } 
       else { 
        firstElementOnViewPort--; 
       } 

       jQuery(sliderList).animate({ 
        left: "+=" + increment, 
        y: 0, 
        queue: true 
       }, "swing", function(){isAnimating = false;}); 
       isAnimating = true; 
      } 

     }); 

     jQuery(next).click(function(event){ 
      if (!isAnimating) { 
       if (firstElementOnViewPort > numElmts) { 
        firstElementOnViewPort = 2; 
        jQuery(sliderList).css('left', "0px"); 
       } 
       else { 
        firstElementOnViewPort++; 
       } 
       jQuery(sliderList).animate({ 
        left: "-=" + increment, 
        y: 0, 
        queue: true 
       }, "swing", function(){isAnimating = false;}); 
       isAnimating = true; 
      } 
     }); 
    } 
}; 

Answer 1

Dieses Plugin soll möglichst automatisch sein, so gibt es nur sehr wenige Optionen. Ich denke, Sie können erreichen, was Sie wollen, nur indem Sie Ihr CSS ändern. Die #customersCarousel muss so groß wie 3 Elemente sein und an der Stelle positioniert werden, an der sich die linke Kante des ersten Elements befinden soll, wenn sie nicht durch den Verlauf auf der linken Seite teilweise verdeckt wurde. Dieser erste Eintrag wird der erste Eintrag auf der Liste sein. Entfernen Sie den rechten Rand von #customersCarouselList (dies kann bei der automatischen Größen- und Positionierungsbehandlung zu Konflikten führen). Ändern Sie dann Ihre Farbverlaufsbilder, um die linke Seite des ersten Objekts und die rechte Seite des dritten Objekts auszublenden. Hoffe diese Hilfe.