我将如何使这个小jQuery滑块正确滑动？

Question

I'm trying to get a slider to slide right, in addition to left. Two buttons named "Next" and "Previous" control the sliding.

Currently the slider slides left no problem. The variable direction holds whether the clicked button is "previous" (slide right) or "next" (slide left). I'm having trouble implementing the logic to make it so when direction == 'previous' the slider slides right. I would think it'd be simply negating some numbers but not so!

Here is the code prepared in jsFiddle: http://jsfiddle.net/LWJQm/

For demo purposes this code is dumb-downed and only slides the same DIV over and over.

JavaScript here:

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;
    });
});

Answer 1

i`m not sure i understand the problem. i moddified your fiddle with a simple if else statement. is this what your are looking for? http://jsfiddle.net/flyingsausage/NvxKj/