How prev/next pagination can work with Draggable slider

[glenn_pot 4 Likes (Newbie)]

Hey all, I'm using this slider on a few pages for this site (bahama bucks dot com) and would like to add optional arrows also.

 

On click, I can update the position of the slides, but I'm having trouble tying in the animation to the correct slide position and everything falls apart when I try. Can someone guide me in the right direction for this step?

 

Thanks, and thanks again for everything from this product and forum!

See the Pen VwKRpYe by glenn_pot (@glenn_pot) on CodePen

[Rodrigo 5,906 Likes (Superhero)]

Hi,

 

Sorry for the late response.

 

I fiddled with your example for quite a bit and I couldn't find a way to make it work. The one approach that you should take is to use the index value to update the progress of the animation based on the button the user clicks using a quickTo instance:

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

 

Then you have to translate that into the Draggable instance's values as well in order to keep everything in sync.

 

Here is super simplified instance with an obvious glitch on it and that doesn't sync the Draggable instance with the click events:

See the Pen rNqqmrq by GreenSock (@GreenSock) on CodePen

 

The challenge here is check the current progress of the animation, specifically when you get to either 0 or 1, and make set the progress to the opposite value depending on the direction to avoid that odd jump. Then update the progress with the x value in the Draggable instance so the proxy element reflects the updated progress as well to avoid those odd jumps.

 

Unfortunately creating this is not the simplest of tasks and we don't have the time resources to create custom solutions for our users. If you want you can post in the Jobs & Freelance forums or contact us for paid consulting.

 

Hopefully this helps in some way to get you started.

Happy Tweening!