two small image slider problems
<p>What I want to accomplish is to animate the selected slide from the right just the selected slide and hide the slides in between and the second problem is when the index is zero it animates a slide in from the left does anyone know how to make it animate from the right - when the index is zero it thes the first index in the list and is 330px to the left <a href="http://jsfiddle.net/mdy5R/2/" rel="nofollow">jsFiddle</a></p>

<p>Also does anyone know how to reset my timer after you have selected a slide or clicked next and prev after a while of clicking it skips if you check out my fiddle you'll see what I mean if you keep clicking</p>

<pre><code>$('.stages li a').on('click', function(e) {
    var slide = $('#' + $(this).data('slide'));
    $('.stages li').removeClass('selected');
    $(this).parent().addClass('selected');
    goto_slide(slide);          
});

function goto_slide(slide) {
    var index = $(slide).index();

    var count = index;

    $('.slides ul').animate({'left': '-=' + (item_width * (count - 1))}, 500, function() {
        $('.slides ul li').slice(0, count - 1).each(function() {
            $('.slides ul li:last').after($('.slides ul li:first'));
            $('.slides ul').css('left', '-330px');                      
        })  

    });

    $('#index').text(index);
}
</code></pre>
