Making a content slider but having a synchronization issue

[Mi_Creativity]

Trying to build a content slider where the slides are animated automatically as well as by using next and previous arrows based on this 

See the Pen LckBh by bassta (@bassta) on CodePen

, while I could manage to do each case alone:

See the Pen jLJyaL?editors=0010 by Mi_Creativity (@Mi_Creativity) on CodePen

See the Pen ZJPLEJ?editors=0010 by Mi_Creativity (@Mi_Creativity) on CodePen

.

 

the bug happens when trying to combine the two scenarios into one, it works well as long as the left and right arrows are not clicked, but if any arrow gets clicked (it's more obvious if you click the arrows more than one time) the animation seems like it lost the synchronization. I'm not sure if it could be fixed using .kill() to destroy the Tween and then re-initialize it but I'm not quite sure how to achieve that.

 

 

 

Link to the same question on stackoverflow

Thanks in advance

See the Pen RZdKer?editors=0010 by Mi_Creativity (@Mi_Creativity) on CodePen

[OSUblake]

Hi @Mi_Creativity

 

Every time you call this function, you're creating a recursive/infinite loop. It's going to be out of control after a couple of clicks.

 

function slideToLeft() {  
  ...
  
  TweenMax.delayedCall($delay, slideToLeft);
}

 

 

You should only make that delayed call after all animations have finished playing. Check this out. I'm using the ModifiersPlugin to wrap the slides. 

 

See the Pen brZLoP by osublake (@osublake) on CodePen