why is my image slider not working?

Question

I am creating an image slider but the slider is showing always the same image.

this is the Jquery code I made

$(document).ready(function(){

slide();

});
var next = 1;
var num = $('#slider img').size();
function slide(){

$('.'+next).show("slide",{direction:"right"},500);
setTimeout(function(){
    $('.'+next).hide("slide",{direction:"left"},500);
    slide();
    if(next == num){
        next = 1;
    }else{
        next = next+1;
    }

},2000);

}

and this the slider html

<div id="slider">
    <img  class="1" src="img/1.jpg"  alt="1">
    <img  class="2" src="img/2.jpg"  alt="2">
    <img  class="3" src="img/3.jpg"  alt="3">
</div>

See live demo

Can somebody help to fix this?

Answer 1

I've just adjusted your Fiddle

with the adjustment

setTimeout(function () {
    $('.' + next).hide("slide", {
        direction: "left"
    }, 500);

    if (next == num) {
        next = 1;
    } else {
        next +=  1;
    }
    return slide(next);
}, 2000);

instead of

setTimeout(function () {
    $('.' + next).hide("slide", {
        direction: "left"
    }, 500);
    slide();
    if (next == num) {
        next = 1;
    } else {
        next +=  1;
    }
 }, 2000);

so the slide() will be called with the next image.