Why does first slideshow image click skip transition and go straight to image?

In the slideshow shown below, there are two images available. Once clicking on a button for the second image after first opening my page, there is a sudden jump to that image with no 5 second transition as expected. Also when doing this, I notice that

#slideshowimage-2

is shown in the url (doing this offline) after clicking the button for that image. Here's the code below:

Because the left and translateX both are different. If you apply left:-800px when slide is at translateX(-800px) (2nd slide) then animation will continue at the 2nd part of slideshow. Thats why you are seeing a blank white space(when translateX(-800px) accors when it is already left:-800px).

Solution:-

You either have to use translateX or left. use the same in all the places

This code doesn't do translateX manually. Instead it uses animation to scoll single time by animation: change 3s forwards;

Drawback:-

Once we click on the slide selection button the animation stops. I have even tried it to solve by adding animation in the change keyframes animate end section. But unfortunately it didn't work. So I would suggest an alternate method to overcome the drawback as follows

To overcome the drawback I have added a play button which
will replay the slideshow animation which got paused by the slide
button. (Once we click on play button it takes a little time to slide
as we have given 16s in animation)