Установка границ для .animate в Jquery

Question

У меня есть рудиментарный ползунок в Jquery, состоящий из div-элемента left_arrow и right_arrow, оба из которых управляют значением 'left' моего div #screens, содержащего длинный .png.Каждый экран имеет ширину 543 пикселей.

$pr('#arrow_left').click(function () {
    $pr('#screens').animate ({"left": "+=543px"}, "fast"); 
});
$pr('#arrow_right').click(function () {
    $pr('#screens').animate ({"left": "-=543px"}, "fast");
});

Действие слайда работает отлично, но я хочу установить минимальное и максимальное значения для #screens 'left', чтобы стрелки не выводили пользователя за пределы изображения в любом направлении.

Answer 1

var max = 543 * 10; //10 slides, for example
var current = 0;
$pr('#arrow_left').click(function () {
    if(current < 0)
    {
        current += 543;
        $pr('#screens').animate ({"left": current + "px"}, "fast"); });

    }
});

$pr('#arrow_right').click(function () {
    if(current > max)
    {
        current -= 543;
        $pr('#screens').animate ({"left": current + "px"}, "fast");

    }
});

Answer 2

Ответ Кай Цина - это круто :) Я сделал вариант для своих нужд и добавил jQuery для переменной max, чтобы она менялась в зависимости от того, сколько у дочернего элемента <div> прямого ползунка, так что у вас никогда не будетчтобы отредактировать его, как только оно будет установлено:)

Я просто оставлю здесь фрагмент кода на тот случай, если он кому-нибудь понадобится: p

$(document).ready(function(){
var max = 275 * $('.slider-wrap > div').length; //change div to whatever element wraps each individual piece of content you're sliding.
var current = 0;
$('.left').click(function () {
if(current < max){
    alert(current);
    current += 275;
    $(".slider-wrap").animate({marginLeft:current + 'px'},'slow'); 
    }
});
$('.right').click(function () {
if(current > 0){
    alert(current);
    current -= 275;
    $(".slider-wrap").animate({marginLeft:current + 'px'},'slow'); 
    }
});

});