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

Question

[AndreyVolkov72]

Интересует логика создания слайдера (карусели). Есть массив слайдера, из 4х элементов, хочу понять как сделать, чтобы при клике на кнопку, все элементы плавно двигались на 1 позицию (влево или вправо), и когда например 1й элемент уходит влево за контент, то он появлялся сразу в конце, и с остальными так же.
С тем, чтобы отобразить 1 элемент слайдера и сделать слайдер бесконечным, проблем нет, но когда надо отобразить все элементы, при этом их плавно сдвигать, и сделать этот слайдер бесконечны, то тут я не понимаю логику.

Comments

[wadowad]

Слайд наверно будет двигаться не только по клику, но и свайпиться, так? Значит элементы уже должны быть готовы. Т.е. нужно вставить заранее копии текущих элементов и до и после, хотя бы на один свайп. А в процессе движения уже добавлять в нужном направлении ещё серию копий, удалять копии в ненужном направлении и пересчитывать позицию скролла.

[Сергей Сергей]

В этом сравнении 5...-5 вся логика зацикливания.

c.style.setProperty( '--off', roff + 9 * ( roff>5?-1:roff<-5?1:0 ) );

[Даниил Жулинский]

Можно создать массив и рендерить каждый раз слайдер

let arr = [1, 2, 3]

const resetArr = () => {
  arr = arr.slice(1).concat(arr[0]) // Меняем структуру массива при каждом клике
}

function renderDomSlider() {
  arr.forEach(elm => {
    elm // Берем каждый елемент массива и делайте с ним что хотите
  })
}

document.querySelector('arrowRight').onclick = () => { resetArr(); renderDomSlider(); }