Simply slider

by Denis

HTML

<div class="slide_block">
    <div class="slides">
        <img src="http://placehold.it/200x200/&text=2" alt="" />
        <img src="http://placehold.it/200x200/&text=3" alt="" />
        <img src="http://placehold.it/200x200/&text=4" alt="" />
        <img src="http://placehold.it/200x200/&text=5" alt="" />
        <img src="http://placehold.it/200x200/&text=6" alt="" />
        <img src="http://placehold.it/200x200/&text=7" alt="" />
        <img src="http://placehold.it/200x200/&text=8" alt="" />
        <img src="http://placehold.it/200x200/&text=9" alt="" />        
        <img src="http://placehold.it/200x200/&text=1" alt="" />        
    </div>
</div>

CSS

.slides {
    position: relative;
    cursor: pointer;
}
.slides img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

var slides = $('.slides');

$('.slide_block').click(function(){
    var next = slides.children().first().finish();
    next.hide();
    next.appendTo(slides);
    next.fadeIn(300);        
});