How to reset a slideshow after the last picture is shown

Question

This is my css file. How to reset a slideshow after the last picture is shown

function slideSwitch() {
    var $active = $('div#slideshow IMG.active');
    var $next = $active.next();   

    $next.addClass('active');
    $active.removeClass('active');
}

$(function() {
    setInterval( "slideSwitch()", 5000); 
    $('#slideSwitch()').slider('div#slideshow', 0);
});

And this is my HTML

<div id="slideshow">
    <img src="img/1.jpg" width="400" height="200" border="6" style="width:400px; margin-left:-200px; left:50%; position:absolute; border-color:#B30000;" class="active" />
    <img src="img/2.jpg" width="400" height="200" border="6" style="width:400px; margin-left:-200px; left:50%; position:absolute; border-color:#B30000;" />
    <img src="img/3.jpg" width="400" height="200" border="6" style="width:400px; margin-left:-200px; left:50%; position:absolute; border-color:#B30000;" />
</div>

Thanks in advance!

Answer 1

Instead of

var $next = $active.next();

Try

var $next = ($active.next().length) ? $active.next() : $('#slideshow img:first);