Держите указатель в пределах и оберните вокруг

Question

Я делаю маленькую карусель с пейджером. Карусель отображает элементы 6 на 6, и у меня есть 36 элементов для отображения. У меня есть следующая и предыдущая кнопка. Первыми отображаемыми элементами являются [0, 6]. Если я нажимаю предыдущую кнопку и нет предыдущих элементов (например, я на первой странице), она должна обернуться и перейти к концу. То же самое относится к последним элементам и следующей кнопке.

Мой код выглядит следующим образом:

$('#img_prev').click(function (e) { 
    # change this line so it wraps around 
    imgIndex = (imgIndex - 6) % 36; 
    alert(imgIndex) 
    refreshImages(imgIndex); 
    e.preventDefault(); 
    return false; 
}); 
$('#img_next').click(function (e) { 
    imgIndex = (imgIndex + 6) % 36; 
    refreshImages(imgIndex); 
    e.preventDefault(); 
    return false; 
}); 

И не жалко, потому что -6% 36 -6, а не 30. Я мог бы с этим справиться, если (index < 0) ..., но я предпочел бы состояние с по модулю, что лучше всего захватить поведение обертывания.

Как это сделать, чтобы обернуть (см. 2-я строка)?

Answer 1

Одним из возможных решений было бы с this answer:

function mod(x, m) { 
    return (x%m + m)%m; 
} 

$('#img_prev').click(function (e) { 
    # this line has been changed, now it wraps around 
    imgIndex = mod(imgIndex - 6, 36); 
    ... 

Answer 2

Вы можете попробовать это:

var maxElements = 36; 
$('#img_prev').click(function (e) { 
    // change this line so it wraps around 
    imgIndex = (maxElements - 1) - (imgIndex % maxElements); 
    alert(imgIndex) 
    refreshImages(imgIndex); 
    e.preventDefault(); 
    return false; 
}); 
$('#img_next').click(function (e) { 
    imgIndex = (imgIndex % maxElements); 
    refreshImages(imgIndex); 
    e.preventDefault(); 
    return false; 
}); 

Вот fiddle показывает выход:

(imgIndex % maxElements) 

и

(maxElements - 1) - (imgIndex % maxElements);