jquery-infinite-carousel-jump 3項目而不是一個

Question

成功使用jquery-infinite-carousel在過去，但對於我目前的項目我需要它永遠循環，也跳一次3項。 它是如何工作的例子，每次跳躍1次here。

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; 

    //console.log("increment = " + increment); 
    //console.log("numElmts = " + numElmts); 
    //console.log("shownInViewport = " + shownInViewport); 

    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; 
       console.log("firstElementOnViewPort = " + firstElementOnViewPort); 
      } 
      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

這將需要大量的重新編碼才能使該插件按照您的要求工作。你看過jCarousel？特別是this example？

---

其實，考慮一下更多...你可以試試triggering a點擊。這裏是我修改了演示：

HTML/CSS

<style type="text/css"> 
#simplePrevious, #simpleNext { display: none; } 
</style> 

<div class="demo"> 
<h2 class="hl">Basic example</h2> 
<div id="viewport"> 
    <ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
    </ul> 
</div> 
<a id="multi-prev">&lt;&lt;</a><a id="simplePrevious">Previous</a> 
<a id="simpleNext">Next</a><a id="multi-next">&gt;&gt;</a> 
</div> 

腳本

jQuery(document).ready(function(){ 
jQuery('#viewport').carousel('#simplePrevious', '#simpleNext'); 

var simulateClicks = 3; 

$('#multi-next').click(function(){ 
    var i=0, t = setInterval(function(){ 
    $('#simpleNext').trigger('click'); 
    i++; 
    if (i > simulateClicks - 1) { clearInterval(t); } 
    }, 500); 
}); 

$('#multi-prev').click(function(){ 
    var i=0, t = setInterval(function(){ 
    $('#simplePrevious').trigger('click'); 
    i++; 
    if (i > simulateClicks - 1) { clearInterval(t); } 
    }, 500); 
}); 

});