GSAP slider: Regarding delayedCall()

[capa 5 Likes (Newbie)]

I am learning JavaScript and GSAP for several months and  tried to make slide show using delayedCall() .

https://greensock.com/docs/v3/GSAP/gsap.delayedCall()

 

However, I encountered the following issues.

1. Expected to cancel slide loop  by hovering on dot pager but not..

2. The first transition is awkward..

 

See the Pen eYJBYme by webgrapher (@webgrapher) on CodePen

[ZachSaucier 7,162 Likes (Superhero)]

Hey capa. You've got a lot of code for a pretty simple effect. I recommend rewriting your code to be more concise and understandable. Here's the outline of what I'd do:

1. Make a function that receives an index as a parameter and fades in the appropriate image and makes the relevant dot more opaque while at the same time does the opposite to the currently active image and dot (perhaps using a stored index to know which one is currently active). Make sure that overwrite is set to "auto" or true for those tweens.
2. Create a delayedCall that calls the function from 1 after a set period of time but make sure that you save a reference to the delayedCall.
3. Modify the function from #1 to cancel and create a new delayedCall similar to #2 but based on the index after the given one. This is what you're not doing in your demo.
4. Add click functions to the dots to call the function from #1.

Simple  

[capa 5 Likes (Newbie)]

Hi Zach,

Thank you for your comment! It's very helpful!

I will try to rewrite my code following your outline^^

[capa 5 Likes (Newbie)]

I rewrite my code and it seems fine. I know there would be simpler way to do this though..

 

See the Pen pogPjrj by webgrapher (@webgrapher) on CodePen

[ZachSaucier 7,162 Likes (Superhero)]

You could use someone else's such as 

 

[capa 5 Likes (Newbie)]

Thank you for the link! It could be a great lesson, looking through what someone else created!

Actually, it is obviously easy to use a existing code but in order to realize what I really want,  I need to know how to create by myself.