Looking for help with creating a loop animation transition using CSS transform.
I've developed a basic slider that utilizes transform to move items. The issue arises when I shift to the right, and the translate value goes from translate3d(-544px, 0px, 0px) to translate3d(-272px, 0px, 0px), causing the transition effect to go left to right. My goal is to have the transition continue moving right to left when the next button is clicked.
I'd also like to achieve a similar effect when the previous button is utilized. I believe this is attainable since owlCarousel has implemented an infinite loop animation similar to what I am trying to accomplish. You can see it in action here https://codepen.io/anon/pen/GPwwmz
Here's the fiddle I created: https://jsfiddle.net/6ofhs3jq/
Any assistance would be greatly appreciated,
Thank you