jQuery Carousel（CarouFredSel）停止動畫如果只有3張圖片

Question

好，稍微複雜的問題。我的網頁上有一個旋轉木馬（使用CarouFredSel插件），有時這個旋轉木馬會有3張圖片，有時會有4張或更多。轉盤設置爲一次顯示3張圖像，中心圖像較大。

我的問題是，如果我只有3張圖像，我不能左右滑動轉盤以使相鄰圖像居中（因此更大）。爲了解決這個問題，我添加一個虛擬圖像（即只寫<img src="" />，所以滑塊認爲有4個圖像，這允許我滑動，但是，我希望能夠在獲得第4個「虛擬」圖像之前停止滑塊。

我的HTML如下：

<div id="wrapper"> 
     <div id="carousel"> 
      <img src="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Christmas.jpg" /> 
      <img src="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Birds.jpg" /> 
      <img src="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/christmas_alt2.jpg" /> 
      <img src="" /> 

     </div> 
      <a id="prev2" class="prev" href="#">&lt;</a> 
      <a id="next2" class="next" href="#">&gt;</a> 
    </div> 

和jQuery滑塊插件：

$(function() { 

      var _center = { 
       width: 275, 
       height: 390, 
       marginLeft: 0, 
       marginTop: 0, 
       marginRight: 0 
      }; 
      var _left = { 
       width: 140, 
       height: 200, 
       marginLeft: 0, 
       marginTop: 100, 
       marginRight: 20 
      }; 
      var _right = { 
       width: 140, 
       height: 200, 
       marginLeft: 20, 
       marginTop: 100, 
       marginRight: 0 
      }; 
      var _outLeft = { 
       width: 100, 
       height: 100, 
       marginLeft: 150, 
       marginTop: 200, 
       marginRight: -150 
      }; 
      var _outRight = { 
       width: 100, 
       height: 100, 
       marginLeft: 0, 
       marginTop: 200, 
       marginRight: 0 
      }; 
      $('#carousel').carouFredSel({ 
       auto: false, 
       prev: { 
        button: "#prev2", 
        key: "left" 
       }, 
       swipe: true, 
       width: 597, 
       height: 392, 
       align: false, 
       items: { 
        visible: 3, 
        width: 100 
       }, 

       next: { 
        button: "#next2", 
        key: "right", 
        items: 1, 
        duration: 400, 
        onBefore: function(data) { 
         data.items.old.eq(0).animate(_outLeft); 
         data.items.visible.eq(0).animate(_left).removeClass('center right').addClass('left'); 
         data.items.visible.eq(1).animate(_center).addClass('center').removeClass('right left'); 
         data.items.visible.eq(2).animate(_right).css({ zIndex: 1 }).removeClass('left center').addClass('right'); 
         data.items.visible.eq(2).next().css(_outRight).css({ zIndex: 0 }); 

         setTimeout(function() { 
          data.items.old.eq(0).css({ zIndex: 1 }); 
          data.items.visible.eq(0).css({ zIndex: 2 }); 
          data.items.visible.eq(1).css({ zIndex: 3 }); 
          data.items.visible.eq(2).css({ zIndex: 2 }); 
         }, 200); 
        } 
       }, 
       prev: { 
        button: "#prev2", 
        key: "left", 
        items: 1, 
        duration: 400, 
        onBefore: function(data) { 
         data.items.old.eq(2).animate(_outRight); 
         data.items.visible.eq(0).animate(_left).css({ zIndex: 1 }).removeClass('center right').addClass('left'); 
         data.items.visible.eq(0).prev().css(_outLeft).css({ zIndex: 0 }); 
         data.items.visible.eq(1).animate(_center).addClass('center').removeClass('right left'); 
         data.items.visible.eq(2).animate(_right).removeClass('left center').addClass('right'); 

         setTimeout(function() { 
          data.items.old.eq(2).css({ zIndex: 1 }); 
          data.items.visible.eq(2).css({ zIndex: 2 }); 
          data.items.visible.eq(1).css({ zIndex: 3 }); 
          data.items.visible.eq(0).css({ zIndex: 2 }); 
         }, 200); 
        } 
       } 
      }); 
      $('#carousel').children().eq(0).css(_left).css({ zIndex: 2 }).addClass('left').removeClass('center right'); 
      $('#carousel').children().eq(1).css(_center).css({ zIndex: 3 }).addClass('center').removeClass('right left'); 
      $('#carousel').children().eq(2).css(_right).css({ zIndex: 2 }).addClass('right').removeClass('center left'); 
      $('#carousel').children().eq(3).css(_outRight).css({ zIndex: 1 }); 
      $('#carousel').children().eq(4).css(_outLeft).css({ zIndex: 1 }); 

     }); 

，這裏是一個的jsfiddle，所以你可以看到我的意思：http://jsfiddle.net/hvZzc/1/

Answer 1

您需要將最小值添加到代碼中：

「最小值：數量創建輪播所​​需的最少項目數。 如果爲null，爲items.visible數量繼承並加1」（從他們website）

並稱標記你的代碼這一個看起來像：

  items: { 
       visible: 3, 
       minimum: 3, 
       width: 100 
      }, 

代替：

  items: { 
       visible: 3, 
       width: 100 
      }, 

http://jsfiddle.net/hvZzc/2/