Testimonial Slider

by vgVl

HTML

<div id="testimonialSlider">
    <div id="testimonial">
        <div><p>Betty had lap band surgery 9 months ago and lost 100 lbs.</p></div>
        <div><p>Margaret feels better than ever after completing her surgery successfully last month.</p></div>
        <div><p>Julie had lap band surgery almost a year ago and feels better than ever now.</p></div>
    </div>
    <div id="testimonialNav">
        <div id="testimonialNavPrevious">&lt;</div>
        <div id="testimonialNavNext">&gt;</div>
    </div>
</div>

CSS

#testimonial {
    overflow:hidden;
    position:relative;
    width:50%;    
    height:50px;
}
#testimonial div {
    display:none;
    position:absolute;
    width:90%;
}
#testimonialNav div {
    cursor:pointer;
    float:left;
    padding:10px;
}
#testimonialNavNext {
    float:right;
}

JavaScript

$(document).ready(function () {
    var displayedItem = 0;    
    var margLeft = $('#testimonial').width();
    var numItems = $('#testimonial div').size()-1;
    console.log(numItems);
    $('#testimonial div').eq(displayedItem).show();

    $('#testimonialNavPrevious').click(function () {
        $('#testimonial div').eq(displayedItem).animate({
            'margin-left': margLeft
        });
        (displayedItem <= -numItems) ? displayedItem = 0 : displayedItem--;
        console.log(displayedItem);
        $('#testimonial div').eq(displayedItem).show().css({
            'margin-left': -margLeft
        }).animate({
            'margin-left': 0
        });
        console.log('previous');
    });
    
    $('#testimonialNavNext').click(function () {
        $('#testimonial div').eq(displayedItem).animate({
            'margin-left': -margLeft
        });
        
        (displayedItem >= numItems) ? displayedItem = 0 : displayedItem++;
        console.log(displayedItem);
        $('#testimonial div').eq(displayedItem).css({
            'margin-left': margLeft
        }).show().animate({
            'margin-left': 0
        });
        console.log('next');
    });
});