Прокрутка слайдера влево
 

Дамы и господа! Не судите строго! Запутался в слайдере :) Как сделать чтобы он прокручивался и влево?

Есть такой код:

buttonRight.addEventListener("click", function () {

    ++i;
    
    if (i >= sliderItem.length) { // Условие если переменная i больше или равна количеству слайдов
        
        sliderItem[i-1].classList.remove("block"); // Удаляем класс block предыдущему слайду
        
        i = 0; // Присваиваем переменной i ноль
        
        sliderItem[i].classList.add("block"); // Добавляем класс block следующему слайду
    } else { 
        
        sliderItem[i-1].classList.remove("block"); // Удаляем класс block предыдущему слайду
        
        sliderItem[i].classList.add("block"); // Добавляем класс block следующему слайду
    }
})

Шаманство с переменой мест , со сменой знаков и прочие танцы с бубном не дали результатов. Я что-то не улавливаю, но не пойму что:)

АртемБМ,

let setIndex = up => i = (i + up + sliderItem.length) % sliderItem.length;

buttonRight.addEventListener("click", function () {
    sliderItem[i].classList.remove("block");
    setIndex(1);
    sliderItem[i].classList.add("block")
})
buttonLeft.addEventListener("click", function () {
    sliderItem[i].classList.remove("block");
    setIndex(-1);
    sliderItem[i].classList.add("block")
})

Как я догадался, вот эту строчку:

let setIndex = up => i = (i + up + sliderItem.length) % sliderItem.length;

можно разложить так:

let setIndex = function(up){

 return i = (i + up + sliderItem.length) % sliderItem.length;}

Не могли бы Вы её объяснить? :)

бесконечная генерация от нуля до length в любом направлении.

<script>
let sliderItem = {length  : 7}, i = 0;
let setIndex = up => i = (i + up + sliderItem.length) % sliderItem.length;
for (var k = 0; k < 23; k++) {
setIndex(-1)
document.write(`${i}<br>`)
}
</script>

<script>
let sliderItem = {length  : 7}, i = 0;
let setIndex = up => i = (i + up + sliderItem.length) % sliderItem.length;
for (var k = 0; k < 23; k++) {
setIndex(1)
document.write(`${i}<br>`)
}
</script>