function heroSliders() {
	var $active = $('#slideshow img.active');
	if ( $active.length == 0 ) {
		$active = $('#slideshow img:last');
	}
	
	// use this to pul the divs in the order they appear in markup
	var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
	
	$active.addClass('last-active');
	$next.css({opacity: 0})
		.addClass('active')
		.animate({opacity: 1}, 1000, function() {
			$active.removeClass('active last-active');
		});
}
$(function() {
	$('div#slideshow>:first').addClass('active');
	setInterval(heroSliders, 3000 );
});