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 ?
The above gif is the actual infinite slider component. I want to build this in
ReactJSwithout manipulating DOM(without usingprependandappendmethods). I want to implement this by usingtransformCSS property with value astranslateX(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
firstcard when I am atlastcard and clickrightarrow. Similarly, when I am about to translate tolastcard when I am atfirstand clickleftarrow.How can I handle this extreme situation and create alike like attached?
Are you guys planning to build such a dynamic component ?