Closure Demo in JS

HTML

<div id='slides'>
<div id='blue'></div>
<div id='red'></div>
<div id='green'></div>
</div>

<pre></pre>
<button id='last'>last</button>
<button id='next'>next</button>

CSS

pre{
    background-color:lightblue;
    display:block;
    width:100px;
    padding:10px;
    text-align:center;
}

button {
    cursor:pointer;
}

#slides {
    position:relative;
    left: 0px;
}

#slides div {
    width:100px;
    height:100px;
    display: inline-block;
}

#red {
    background-color:red;
}

#blue {
    background-color:blue;
}

#green {
    background-color:green;
}

JavaScript

i = 1;
amount = 3;

$('#last').click(function(){
    i--;
    run();    
});

function run() {

    var idx = i%amount;
    $('#slides').animate({left:(-100*idx)+'px'}, 500);
    $("pre").text(idx+1+' / '+amount);
    i++;
    
}

setInterval(run, 3000);