jQuery scrollLeft несколько шагов

Question

Я использую Jquery scrollLeft как в этом demo.

Как я могу изменить «следующий» щелчок, чтобы прокрутить 3 изображения вправо (и влево) вместо одного?

var $boxes = $(".images"), 
    $slides = $('#slides'), 
    pos = 0; 
$("#next").click(function() { 
    var $nextBox = $boxes.first(); 
    $boxes.length > ++pos + 3 ? $nextBox = $($boxes[pos]) : pos = 0; 
    $slides.animate({ 
     scrollLeft: $nextBox.offset().left + $slides.scrollLeft() 
    }, 500); 
}); 
$("#prev").click(function() { 
    var $nextBox = $boxes.last(); 
    ($boxes.length > --pos && pos > -3) ? $nextBox = $($boxes[pos]) : pos = $boxes.length - 3; 
    $slides.animate({ 
     scrollLeft: $nextBox.offset().left + $slides.scrollLeft() 
    }, 500); 
}); 

Answer 1

$("#next").click(function() { 
    var $nextBox = $boxes.first(); 

    pos += 3; 
    $boxes.length > pos ? $nextBox = $($boxes[pos]) : pos = 0; 

    $slides.animate({ 
     scrollLeft: $nextBox.offset().left + $slides.scrollLeft() 
    }, 500); 
}); 

$("#prev").click(function() { 
    var $nextBox = $boxes.last(); 

    pos -= 3; 
    ($boxes.length > pos && pos > -1) ? $nextBox = $($boxes[pos]) : pos = $boxes.length - 3; 

    $slides.animate({ 
     scrollLeft: $nextBox.offset().left + $slides.scrollLeft() 
    }, 500); 
}); 

http://jsfiddle.net/r6HwL/89/

Answer 2

Я обновил ваш Javascript, чтобы выглядеть так, вы можете видеть это на JS Fiddle. Я также рекомендовал бы рефакторинг кода, чтобы анимационная функциональность была обернута в свою собственную функцию.

Кроме того, имейте в виду, что индекс 0 является первым слайдом, 1 - вторым слайдом и т. Д.

http://jsfiddle.net/r6HwL/86/

var $boxes = $(".images"), 
    $slides = $('#slides'), 
    pos = 0; 
$('button[data-go]').on('click', function() { 
    var slide = $('input[data-slide]').val(), 
     el = $slides.find('img').eq(slide); 

    $slides.animate({ 
     scrollLeft: el.offset().left + $slides.scrollLeft() 
    }, 500); 
}); 


$("#next").click(function() { 
    var $nextBox = $boxes.first(); 

    $boxes.length > ++pos ? $nextBox = $($boxes[pos]) : pos = 0; 

    $slides.animate({ 
     scrollLeft: $nextBox.offset().left + $slides.scrollLeft() 
    }, 500); 
}); 

$("#prev").click(function() { 
    var $nextBox = $boxes.last(); 

    ($boxes.length > --pos && pos > -1) ? $nextBox = $($boxes[pos]) : pos = $boxes.length - 1; 

    $slides.animate({ 
     scrollLeft: $nextBox.offset().left + $slides.scrollLeft() 
    }, 500); 
}); 

Answer 3

Мой (поздно) бит имеет настраиваемые действия.

var $boxes = $(".images"), 
    $slides = $('#slides'), 
    pos = 0; 
    mx = $boxes.length; 
    steps = 3; 

$("#next").click(function() { 
    pos = pos + steps; 
    if (pos >= mx) { 
     pos = 0; 
    } 
    var $nextBox = $boxes.eq(pos); 
    $slides.animate({ 
     scrollLeft: $nextBox.offset().left + $slides.scrollLeft() 
    }, 500); 
}); 

$("#prev").click(function() { 
    pos = pos - steps; 
    if (pos < 0) { 
     pos = mx - steps; 
    } 
    var $nextBox = $boxes.eq(pos); 
    $slides.animate({ 
     scrollLeft: $nextBox.offset().left + $slides.scrollLeft() 
    }, 500); 
});