Как написать слайдер карусель, с пролистыванием по кругу в обе стороны?

Question

[Alex Mirgorodskiy]

Всем привет коллеги) Решил взяться за изучение чистого Java-скрипта, и сразу встала задача не самая простая для начинающего, сделать слайдер такой же как и этот kenwheeler.github.io/slick первый singl_item, но своими усилиями. Помогите пожалуйста понять механику и принцип построения. Нагуглив, пройдясь по примерам и то что в голову пришло, это 1. В трек с необходимыми слайдами добавить клоны с обоих сторон, ну и по условиям их еще местами переставлять. 2.При каждом слайде тот что перелистнули перемещать в конец трека. И тут сразу вопросы.1.На сколько это правильно(есть ведь уже устоявшиеся решение подобных задач). 2.На сколько это производительно. 3.Добьюсь ли я в итоге результата каким то из найденных способов, или есть по проще что то? Если есть с удовольствием по слушаю, можно на jq или js как удобно, просто сама логика как правильно сделать не понятна + еще к этому и ко всему нужно плавность небольшую добавить, но это уже не критичный вопрос. Спасибо)

Вот код если кому нужен (там уже все немного сломано)) Но суть как я начал делать думаю ясна - jsfiddle.net/bsz0ewmp/8

Answer 1

[Владимир Обабков]

Лично я переставляю элементы местами на лету..
В move передаётся 1/-1 в зависимости от кнопки next/prev

function move(direction) {            //300px = gallary width
        $(imgset).eq(i).css('left', '0').animate({left: (300 * direction) + 'px'}, 1000);
 
        i += direction; // 1 + (-1) = 0
 
        if (i >= imgset.length) {
            i = 0;
        }
        else if (i < 0) {
            i = imgset.length - 1; // 5 - 1 
        }

        $(imgset).eq(i).css('left', (300 *(-direction)) + 'px').animate({left: '0'}, 1000);
    }

Взял функцию перестановки из своей либы.. Если надо, есть полная версия с пояснением.

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