How can I create Infinite Slider ?

[ProPhycient5]

The above gif is the actual infinite slider component. I want to build this in ReactJS without manipulating DOM(without using prepend and append methods). I want to implement this by using transform CSS property with value as translateX(domWidth). I am able to slide each card in right and left directions, if any element is present in the right and left directions respectively.

However, I cannot translate smoothly (as shown in the GIF) to first card when I am at last card and click right arrow. Similarly, when I am about to translate to last card when I am at first and click left arrow.

How can I handle this extreme situation and create alike like attached?

Are you guys planning to build such a dynamic component ?