Блог

У меня есть карусель, в которой есть опция перетаскивания, созданная с помощью translate3d . Принимая во внимание, что это используется translate3d для перехода к следующему слайду, я заканчиваю переводом до конца карусели. Можете ли вы помочь мне найти решение?

Логика следующего слайда:

     goNext() {
    this.carousel.style.transform = `translate3d(${-(  this.elementIndex * this.album.clientWidth)}px,0,0);
    }
  

Когда я дойду до конца карусели:
Я знаю, что могу перевести в 0 в конце, но я хочу, чтобы на последнем слайде была сохранена опция перетаскивания и чтобы можно было перетащить на первый слайд, выглядящий как следующий. Есть идеи?

Хитрость в том,:

• поместите клон последнего изображения в начало карусели, а первое изображение — в конец карусели (во время инициализации).

  5 [1 2 3 4 5] 1

• когда пользователь нажимает «далее» на последнем слайде, вы должны переключить его на самый первый слайд (клонированный «5») без анимации, а затем вы можете преобразовать его в «1» с анимацией

  1) 5 1 2 3 4 [5] 1

  2) [5] 1 2 3 4 5 1

  3) 5 [1] 2 3 4 5 1