Trouble with slider-accardion?

Question

JavaScript

There is an accordion slider https://codepen.io/anon/pen/vrVmwM
When you click on the rightmost picture, 2 slides switch quickly, and should switch in turn every 3 seconds.
Initially, for all slides, the block with the picture has a width of 128 px (this is done in order to center the picture), and for the active one it is 516px . This active slide (which is fully visible) has the active class, when you click on the next slide, the active class is removed from the current one, and the next one is added. But it is removed early (it leaves to the left already narrowed to 128px, since by default, all except the active one have a width of 128px). How would I do this so that the current class is deleted only after it is completely hidden. Looks like I'm in the wrong place in the code (not at that moment) removing the active class from the current slide.

Programmers, Please take a look! Thanks a lot to everyone who will respond!