Как сделать слайдер с несколькими одновременно изменяемыми блоками?

Или если не изменять i то
next.onclick = () => {
for (let n=0; n < pets.length - 1; n++) {
images.forEach(function (petImg, i, images) {
petImg.setAttribute('src', `${pets[i+n].img}`)
})
}
}

Как сделать слайдер с несколькими одновременно изменяемыми блоками?

Добавить еще один итератор и еще один цикл по идее.
У меня вот получается что-то тоже самое, что и в начале.
next.onclick = () => {
for (let n=0; n < pets.length - 1; n++) {
images.forEach(function (petImg, i, images) {
petImg.setAttribute('src', `${pets[i++].img}`)
})
}
}

Как сделать слайдер с несколькими одновременно изменяемыми блоками?

В целом что такое смещение я знаю. Я же его как раз и прописываю в src.
А как его заставить работать так, чтобы каждый элемент в изменяемом массиве увеличиался на 1 столько раз, сколько в массиве со ссылками элементов, и потом обнулялся?

Как сделать бесконечный слайдер?

next.onclick = () => {
images.forEach (function (image i, images) {
i++
outImg.innerHTML =``
})
}

То есть вот так, если с Вашими переменными.

Как сделать слайдер с несколькими одновременно изменяемыми блоками?

условие убрала, работает точно так же.
next.onclick = () => {
images.forEach (function (petImg, i, images) {
i++
petImg.setAttribute('src', `${pets[i].img}`)
})
}

Как сделать слайдер с несколькими одновременно изменяемыми блоками?

Спасибо!
А можно еще про смещение, как для чайника?
Как его реализовать?

Как сделать бесконечный слайдер?

Попробовала Ваш код видоизменить под слайдер, в котором одновременно должно несколько слайдов прокручиваться.
Получилось так

images.forEach (function (petImg, i, images) {
if (i i++
petImg.setAttribute('src', `${pets[i].img}`)
}
else {
i=0
}
})
};

prev.onclick = () => {
images.forEach (function (petImg, i, images) {
if (i > 0) {
i--
} else {
i = pets.length - 1
petImg.setAttribute('src', `${pets[i].img}`)
}
})
};

Но срабатывает почему-то только 1 раз
Подскажите пожалуйста, что я делаю не так?