jQuery image slider

Am trying to create a simple JQuery Slider. And each time only one picture should be visible. And after x seconds a new image shoud fade in.

HTML

<div id="slideshow">
			<div class="vHolder">
                <img src="http://lorempixel.com/150/150/city/1" alt="Slideshow Image 1" class="active" /> 
			</div>
			<div class="vHolder">
				<img src="http://lorempixel.com/150/150/city/2" alt="Slideshow Image 2" />
			</div>

			<div class="vHolder">
				<img src="http://lorempixel.com/150/150/city/3" alt="Slideshow Image 3" />
			</div>
			<div class="vHolder">
				<img src="http://lorempixel.com/150/150/city/4" alt="Slideshow Image 4" />
			</div>
	</div>

CSS

#slideshow {
    position:relative;
    height:350px;
}

#slideshow img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
	max-width: 150px;
  
}

#slideshow img.active {
    z-index:10;
    opacity:1.0;
}

#slideshow img.last-active {
    z-index:9;
}

JavaScript

function slideSwitch() {
    var $active = $('#slideshow img.active').parent();

    if ( $active.length == 0 ) $active = $('#slideshow img:last').parent();

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

    $active.children('img').addClass('last-active');

    $next.css({opacity: 0.0})
        .animate({opacity: 1.0}, 1000, function() {
            $next.children('img').addClass('active')
        });
    
    $active.css({opacity: 1.0})
        .animate({opacity: 0.0}, 1000, function() {
            $active.children('img').removeClass('active last-active');
        });
    
    
}

$(function() {
    setInterval( "slideSwitch()", 2500 );
});