$(document).ready(function() {
    var $this,
        $active,
        $slides = $('.slides').find('img');

    // check if we have enough images    
    if ( $slides.length > 1 ) {
        // hide all but the first image
        $slides.filter(':not(:first)').css({ 'opacity': 0, 'display': 'none' });
        // slideshow function
        setInterval(
            function() {
                // find the visible image
                // hide it
                $active = $slides.filter(':visible').animate({
                    'opacity': 0
                }, 1000, function() {
                    $active.hide();
                });
                // check if its the last image
                if ( $active.is(':last-child') ) {
                    // if its the last image, show the first image
                    $slides.first().show().animate({ 'opacity': 1 }, 1000);
                } else {
                    // else, show the next image
                    $active.next().show().animate({ 'opacity': 1 }, 1000);
                }
            },
            8000
        );
    }
});