Jump to content
Search Community

Infinite carousel images with autoplay, drag and resume

Juan Munoz
Moderator Tag

Recommended Posts

Juan Munoz
Posted

Hi, I'm trying to develop an infinite carousel of images with different sizes. I was able to create the carousel but I want to be able to drag to move the carousel and when the drag ends the movement resumes. I've seen several tutorials on this blog but it's been difficult to adjust because they don't have different images. Thanks for any help

mvaneijgen
Posted

I've copied the seamless loop helper with draggable functionally from the docs https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/#demo-with-draggable and just add paused: false to it an it all seems to work as expected. I've also given some of the elements a random width, which also works out of the box. 

 

Hope it helps and happy tweening! 

 

See the Pen LEPQmeQ?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

  • Like 2
Juan Munoz
Posted
On 1/9/2025 at 7:32 AM, mvaneijgen said:

I've copied the seamless loop helper with draggable functionally from the docs https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop/#demo-with-draggable and just add paused: false to it an it all seems to work as expected. I've also given some of the elements a random width, which also works out of the box. 

 

Hope it helps and happy tweening! 

 

 

 

I just tried your code but sometimes when I drag it stops.

Posted

Yeah that could be related to this part of the helper function:

onThrowComplete: () => {
  syncIndex();
  wasPlaying && tl.play();
}

In some cases that boolean could be false so it won't play the timeline after a throw because the timeline that the helper function creates is paused.

 

You can just remove that from the callback and see how it works:

onThrowComplete: () => {
  syncIndex();
  tl.play();
}

Hopefully this helps

Happy Tweening!

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...