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

向“当前”文章幻灯片添加一个类，检查它是第一篇还是最后一篇:

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