使用animate（）在javascript中使用上一个/下一个按钮滑动图像

Question

I have a slideshow of 4 banners with Prev and Next button. It works fine with the Prev button but not the Next button.My problem is Once I press the Next button, the images move not properly.

This is the result I need.=> The next image on the right slides from right to left when clicking Next button.Now it slides but sometimes some images slides back to the right.

Please help.Thank you

<http://jsfiddle.net/pktono/sr5nv6k9>

Answer 1

So, there was couple of issues to fix:

1- animation time was overriding the css command. To fix that, you should use setTimeout function where your aftermath code should reside inside of it.

2- When you navigate to right, you set the previous banner left property to -650px. If you decide to navigate to the left at this moment, you have a wrong left property which ruin the rules. The same thing can happen when you are navigating to left and want to switch to right. To fix this, you should change left property of the current banner to the right value before animating it.

See the working example here