Как создать анимацию перехода цикла с помощью CSS-преобразования

Question

Может кто-нибудь помочь мне создать переход анимации цикла с помощью CSS-преобразования.

Я создал простой слайдер, который использует преобразование для перемещения элементов. проблема в том, что когда я двигаюсь вправо и значение translate составляет от translate3d(-544px, 0px, 0px) до translate3d(-272px, 0px, 0px), у него будет переход слева направо, я хочу, чтобы эффект перехода продолжал двигаться справа налево при нажатии следующей кнопки.

, а также делать то же самое, когда используется предыдущая кнопка. Я почти уверен, что это достижимо, поскольку owlCarousel реализовал свою анимацию бесконечного цикла, как то, что я пытаюсь достичь, вы можете увидеть это здесь https://codepen.io/anon/pen/GPwwmz

Вот скрипка, которую я создал https://jsfiddle.net/6ofhs3jq/

Буду признателен за любую помощь,

Спасибо

Answer 1

Вы должны действовать по тому же принципу в ответе, который я оставил на вопрос, который вы задали jquery-javascript-loop-slider-item , это почти то же самое.

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

1. Необходимо исправить размеры изображений (ширина).
2. Все изображения нуждаются в одинаковой ширине, чтобы можно было использовать ваш translate3d для создания бесконечного цикла.
3. Когда вы реагируете на последний и первый элемент карусели, вам нужно клонировать элементы и поместить их в правую часть, чтобы создать бесконечный цикл.

Вы можете узнать больше, прочитав код в Библиотека карусели совы