Добавляем кнопкам атрибут, который будет указывать относительную позицию нового активного элемента:
<span class="prev" data-step="-1">Prev</span>
<span class="next" data-step="+1">Next</span>
Индекс нового активного элемента будет суммой индекса текущего и относительного положения нового. Чтобы произошёл переход из конца в начало - необходимо брать остаток от деления суммы на количество элементов, индекс несуществующего элемента, расположенного за последним, превратится в 0. Переход из начала в конец - в случае jquery ничего делать не надо, метод
eq позволяет указывать отрицательные индексы, которые используются для отсчёта позиции элемента начиная с конца; в случае чистого js надо будет добавить к сумме количество элементов, чтобы потенциальное отрицательное значение стало положительным, и при этом не изменился остаток от деления.
const itemSelector = 'li';
const buttonSelector = '[data-step]';
const activeClass = 'active';
$(buttonSelector).click(function() {
const { step } = this.dataset;
const $items = $(itemSelector);
const $active = $items.filter(`.${activeClass}`);
$active.removeClass(activeClass);
$items.eq(($active.index() + +step) % $items.length).addClass(activeClass);
});
// или
const items = document.querySelectorAll(itemSelector);
let index = 0;
document.querySelectorAll(buttonSelector).forEach(n => {
n.addEventListener('click', onClick);
});
function onClick({ currentTarget: { dataset: { step } } }) {
items[index].classList.remove(activeClass);
index = (index + items.length + +step) % items.length;
items[index].classList.add(activeClass);
}
