Как сделать эффект бесконечности в слайдере на чистом JS?

Question

[Alexander]

Здравствуйте, помогите с задачей...
Есть слайдер для которого нужно допилить нормальный эффект infinity, сейчас там ужи присутствует некий эффект бесконечности, но это далеко не то что хотелось получить, нужно просто сделать бесконечный цикл прокрутки слайдов, как для примера - Swiper JS или Slick. И самое сложное из этого всего, это сохранить индексы (this.options.position), ибо они уже привязаны к dot navigation и в целом к анимации translateX, как-то так)

Буду очень благодарен за какую-либо помощь.

Comments

[Ярослав Иванов]

Не бесконечности а зацикленность.

[Alexander]

Ярослав Иванов, какая разница, это сути не меняет

[Ярослав Иванов]

Alexander, ну если для вас не меняет нет смысла продолжать диалог.

[Alexander]

Ярослав Иванов, да я и не собирался

Answer 1

[Сергей delphinpro]

так же как и в других каруселях — клонируйте часть слайдов. В данном случае один первый и помещайте его в конец.
после перехода на первый слайд (клон), прокручивайте панельку в начальное состояние, но без анимации, мгновенно.
Клонированные элементы можно отмечать атрибутами или классами.

Почему бы не взять уже готовый слайдер?

Comments

[Alexander]

Пытался делать это с помощью

this.wrap.appendChild(this.wrap.firstElementChild) при клике

, но как мне быть с индексами самих слайдов? От них зависят dots, сколько слайдов - столько и точек

[Alexander]

А на счет готовых слайдов. Я пытаюсь изучить JS изнутри, проще простого взять готовое решение и впихнуть в свой проект, но многому не научишься делая подобные действия как по мне

[Сергей delphinpro]

Alexander, помечайте клоны, не привязывайте к ним пагинацию. И вообще не привязывайте пагинацию к индексу. Сделайте отдельные атрибуты на слайдах.

[Alexander]

Сергей delphinpro, получается нужно делать полный рефакторинг плагина, я понял спасибо за совет