jQuery slideshow - last photo wont loop to first one with animation

Question

I have created a very simple slideshow using jQuery. The slideshow is working just fine however when it is at the last photo and i want it to loop to the first one, instead of animate to the first one, it's just jumping without any animations, and the rest of my photos are working fine. Hopefully someone can help me with this issue.

Thanks.

HTML code:

<div class="slideshow">
        <ul class="slider">
            <li class="slide"><img src ="imgs/model_05.jpg"></li>
            <li class="slide"><img src ="imgs/model_06.jpg"></li>
            <li class="slide"><img src ="imgs/model_07.jpg"></li>
            <li class="slide"><img src ="imgs/model_08.jpg"></li>
        </ul>
</div>

CSS code:

.slideshow {
    clear: both;
    width:400px;
    height:400px;
    border: 1px solid black;
    overflow: hidden;
}

.slideshow .slider {
    width:2000px;
    height:400px;
}

.slideshow .slider .slide {
    list-style: none;
}

.slideshow .slider .slide img{
    width:400px;
    height:400px;
    float:left;
}

jQuery code:

var sliderWidth = 400;
var animationSpeed = 1000;
var sliderPaused = 3000;
var currentSlide = 1;

//cache DOM
var $slideShow = $(".slideshow")
var $slider = $slideShow.find(".slider")
var $slides = $slider.find(".slide");

setInterval(function () {

    $slider.animate({
        marginLeft: "-=" + sliderWidth
    }, animationSpeed, function () {

        currentSlide++;
        if (currentSlide === $slides.length) {
            currentSlide = 1;
            $slider.css("margin-left", 0);
        }

    });

}, sliderPaused);

Answer 1

Because you are not animating when currentSlide is==1.

Try this code -

if (currentSlide === $slides.length) {
        currentSlide = 1;
        $slider.animate({
            marginLeft : 0
        });
    }