Fade Slider

HTML

<div id="slider">
    <div class="container">
        <a href="#"><img src="http://placekitten.com/300/300" alt="" /></a>
        <a href="#"><img src="http://lorempixel.com/300/300/" alt="" /></a>
        <a href="#"><img src="http://placehold.it/300x300" alt="" /></a>
    </div>
</div>

CSS

#slider {
position: relative; margin: 0px; padding: 0px;
}

#slider a {
    position: absolute;
    top: 0px; left: 0px;
    display: block;
}
img{
  width:300px;
  height:300px;
}

JavaScript

$("#slider a").hide();
$("#slider a:first-child").show();

var counter = 0;
var images = $('#slider .container > a').length;
var imgload = 0;

function doslider(){
    counter++;
    var x = counter % images;
    if (x == 0) {
        $('#slider a:not(:last-child)').hide();
        $('#slider a:first-child').show();
        $('#slider a:last-child').fadeOut();
    } else {
        $('#slider .container > a:nth-child('+(x+1)+')').fadeIn();
    }
    setTimeout(doslider,3000);
}

setTimeout(doslider,3000);