Как сделать слайдер с несколькими одновременно изменяемыми блоками?
Есть массив из обьектов, в котором в свойстве img прописаны url.
Нужно сделать слайдер из этих изображений так, чтобы три из них отображались одновременно.
У меня получилось вот так:
Слайдер отрабатывает только один раз, почему-то. Не могу понять, где ошибка.
next.onclick = () => {
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}`)
}
})
}
• внутри forEach изменять индекс нежелательно,
• а логика ограничений индекса бессмысленна, это уже функция перебора.
• нет смещения соответствия индексов между массивом изображений и массивом объектов pets,
• вот при изменении смещения потребуется контроль границ индексов.
В целом что такое смещение я знаю. Я же его как раз и прописываю в src.
А как его заставить работать так, чтобы каждый элемент в изменяемом массиве увеличиался на 1 столько раз, сколько в массиве со ссылками элементов, и потом обнулялся?
Добавить еще один итератор и еще один цикл по идее.
У меня вот получается что-то тоже самое, что и в начале.
next.onclick = () => {
for (let n=0; n < pets.length - 1; n++) {
images.forEach(function (petImg, i, images) {
petImg.setAttribute('src', `${pets[i++].img}`)
})
}
}
Или если не изменять 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}`)
})
}
}
Простой
Средний
