CODEWITHSUNDEEP
jqueryscrolljquery-animate
simon
simon

Reputation: 2387

jQuery check if last slide

I am building a jQuery carouselvery (simple one). It's actually working fine, except that when i click next slide, it just continues intill it's all white and out of frame. So what i don't know is how to disable the next when the slide has reached to the end, and disable the prev when the slide is at start position:

//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' -->

I have created a small fiddle

Upvotes: 1

Views: 766

Answers (1)

jammykam
jammykam

Reputation: 17000

Add a class to the "current" article slide check if it is the first or last one:

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

Upvotes: 3

Related Questions