carousel slider GSAP carousel slider on Vue 3

[Mukhriddin]

Hi team!
How can I make this slides automatically play in every 10 seconds or so...
When it reaches the last slide, animation starts from start 

thanks)

 

See the Pen xxmXdJj by mshakhriyorov (@mshakhriyorov) on CodePen

[Rodrigo]

Hi,

 

You should take a look at this example by @PointC

 

See the Pen YRzRyM by PointC (@PointC) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Mukhriddin]

3 minutes ago, Rodrigo said:

Hi,

 

You should take a look at this example by @PointC

 

 

 

 

Hopefully this helps.

Happy Tweening!

Hi Rodrigo!
Isn't there any way to make it slide automatically without any handling, or clicking, etc. ?

[Rodrigo]

Hi,

 

You can use a function to change the slide and a GSAP DelayedCall in order to use a timer that you can pause and restart as you please:

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

 

This is a super old example (over 9 years ago) and it definitely needs an overhaul but I don't have the time to update it now:

See the Pen JjRdxP by rhernando (@rhernando) on CodePen

 

But the relevant part of the code is this:

pauseTime = 2,
timerFunction = TweenLite.delayedCall(pauseTime, changeSlide),

In the animation created in the changeSlide function, use an onComplete to restart the timerFunction. The syntax is old but the way DelayedCall works hasn't change since, so it should provide a good starting point.

 

Hopefully this helps.

Happy Tweening!

[Mukhriddin]

thank for time