I'm right now implementing an image slider using just jQuery (no plugins that is) for some reason and I'm stuck on some things.
At the moment I have 6 static images that I have wrapped in a div (having overflow property of CSS as hidden and having fixed width) that I'm shifting using .
The logic I'm applying is to subtract the needed left property on the aforementioned div on the click of right arrow and vice versa for the left click(add those quantities to he left property).
1) On click, the image which was shifted crosses to the left and shows up and is visible. The new image that landed just now in the div remains invisible. What happens here and how can I display just the relevant image in the div?
2) How would I handle the case where the last image is reached on the right button click? And similarly for left button click event on first image.
I'm new to the front-end so any help/feedback will be appreciated. Here is the code: