After creating a basic javascript/css image slider as a learning exercise, I am now looking to implement it in real-world projects. However, the animation is choppy on my high-spec desktop and even worse on mobile devices. You can view the slider in action here:
http://jsfiddle.net/9aozrxy8/5/
In summary, the issue arises when trying to transition between images using javascript translateX function with CSS transitions. Despite attempts to optimize by using translate3d, the smoothness of the animation remains subpar. Other websites with more complex animations run smoothly, so there might be something missing from my implementation.
The posted code snippet includes a function called slideRight, which handles transitioning between images within a row of 4 images. The snippet outlines calculations for sliding distance and transforms based on user input. Though the issue persists, adjustments have been made for smoother display on mobile screens.
Thank you,
C