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