CODEWITHSUNDEEP
javascriptjqueryslider
velo9
velo9

Reputation: 2335

How would I make this small jQuery slider slide right?

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

Upvotes: 0

Views: 767

Answers (1)

Dirk
Dirk

Reputation: 1020

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/

Upvotes: 1

Related Questions