javascript - この小さな jQuery スライダーを右にスライドさせるにはどうすればよいですか?

Question

左に加えて右にスライドするスライダーを取得しようとしています。「次へ」と「前へ」という名前の 2 つのボタンがスライドを制御します。

現在、スライダーのスライドは問題ありません。この変数directionは、クリックされたボタンが「前」(右にスライド) か「次」(左にスライド) かを保持します。direction == 'previous'スライダーが右にスライドするときにロジックを実装するのに問題があります。いくつかの数字を単純に否定していると思いますが、そうではありません!

jsFiddle で準備されたコードは次のとおりです: http://jsfiddle.net/LWJQm/

デモ目的のために、このコードは単純化されており、同じ DIV を何度もスライドするだけです。

ここに JavaScript:

var $slider= $('#slider'),
    sliderHtml = $slider.html(),
    $next = $('#next'),
    $previous = $('#previous'),
    sliderWidth= parseInt($slider.css('width')),
    locked = false;

$('.button').on('click', function() {
    if (locked) {
        return false;   
    }

    locked = true;

    var direction = $(this).attr('id');
    console.log(direction);

    var $transfer = $('<div></div>').css({'width': (2 * sliderWidth) + 'px'});
    var $current = $('<div></div>').css({'width': sliderWidth+ 'px', 'left': '0', 'float': 'left'}).html($slider.html());
    var $next = $('<div></div>').css({'width': sliderWidth+ 'px', 'left': sliderWidth + 'px', 'float': 'left'}).html(sliderHtml);

    $transfer.append($current).append($next);
    $slider.html('').append($transfer);

    $transfer.animate({'margin-left': '-' + sliderWidth+ 'px'}, 300, function() {
        locked = false;
    });
});