jQuery检查是否上一张幻灯片

Question

我正在构建一个jQuery carouselvery（简单的）。它实际上工作正常，除了当我点击下一张幻灯片时，它只是继续，直到它全部是白色的并且不在框架中。所以我不知道是如何禁用未来当滑动已达到结束，并禁用分组当滑动是在起始位置：

//Slider 
    $('#reviewnext').click(function(){ 
     $('#slide-container').animate({ 
      'margin-left':'+=-348px' 
     }) 
    }) 
    $('#reviewprev').click(function(){ 
     $('#slide-container').animate({ 
      'margin-left':'+=348px' 
     }) 
    }) 

HTML：

<div id="customer-reviews"> 
    <div id="slide-container"> 
     <article> 
      <p>Bacon ipsum dolor sit amet biltong ball tip corned beef jerky, filet mignon boudin andouille frankfurter. Ribeye prosciutto pig filet mignon bresaola.</p> 
     </article> 
     <article> 
      <p>Bacon ipsum dolor sit amet biltong ball tip corned beef jerky, filet mignon boudin andouille frankfurter. Ribeye prosciutto pig filet mignon bresaola.</p> 
     </article> 
    </div><!-- End slide-container --> 
</div><!-- End customer-reviews' --> 

我创建了一个小fiddle

Answer 1

添加类的“当前” article幻灯片检查，如果它是第一个或最后一个：

的JavaScript

$('#reviewnext').click(function(event){ 
    event.preventDefault(); 
    var $article = $("article.current"); 
    if ($article.parent().children().index($article) != $article.parent().children().length-3) { 
     $('#slide-container').animate({ 
      'margin-left':'+=-348px' 
     }); 
     $article.removeClass("current").next().addClass("current"); 
    } 
}) 
$('#reviewprev').click(function(event){ 
    event.preventDefault(); 
    var $article = $("article.current"); 
    if ($article.parent().children().index($article) != 0) { 
     $('#slide-container').animate({ 
      'margin-left':'+=348px' 
     }); 
     $article.removeClass("current").prev().addClass("current"); 
    }  
}) 

jsFiddle Demo