Пустые места, появляющиеся в конце моей карусели

Question

Я использовал this script, чтобы создать бесконечную карусель на моем сайте here. Он был настроен с помощью CSS, поэтому первый и последний элементы отображаются наполовину.

Если вы продолжаете нажимать на стрелку вправо, вы в конечном итоге попадаете в пустое место в конце. До сих пор я не мог это исправить. Может ли кто-нибудь предложить какие-либо решения?

Вот соответствующий скрипт:

/** 
* @author Stéphane Roucheray 
* @extends jquery 
*/ 
jQuery.fn.simplecarousel = 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; 
      } 
     }); 
    } 
}; 

#home-carousel-container { 
    position: relative; 
} 
#home-carousel { 
    overflow: hidden; 
} 
#home-carousel ul { 
    margin-left: -143px; 
    padding: 0; 
    position: relative; 
} 
#home-carousel li { 
    float: left; 
    height: 645px; 
    list-style: none outside none; 
    margin: 0 3px; 
    width: 256px; 
} 

Answer 1

В соответствии с моим комментарием.

Вы установили отрицательный левый край на своей карусели, заставив его скрыть половину изображения. В результате, когда вы нажимаете next/previous, он показывает, куда перемещается изображение, чтобы создать непрерывный аффект.

Witihin ваш CSS, я изменил

#home-carousel ul{ 
    position: relative; 
    padding: 0; 
    margin-left: -143px; 
} 

в

#home-carousel ul{ 
    position: relative; 
    padding: 0; 
    margin-left: -3px; 
} 

И не было никаких проблем, что так всегда.