Wrapping GSAP Auto-Slider Direction and Multi-Sliders?

[pietM]

Hi everyone! 

 

A quick, perhaps easy question to answer: How to change the animateSlides(direction) here (from right to left instead of left to right)? Also curious if the slider can be wrapped for multiple sliders on a single page. Something like sliders.forEach((slider, i) => {});  

 

I appreciate your thoughts. 
With appreciation, 
M 

See the Pen RwrWVXg by euqio (@euqio) on CodePen.

[ZachSaucier]

Hey piet. The GSAP version being used there is pretty old. We highly recommend using GSAP 3. This migration guide can help you convert it to GSAP 3:

GSAP has a lot of handy parts to it including the wrap utility method. It's perfect for doing this sort of thing.

 

As for how to make it go in the other direction, you basically just need to flip the sign of the x and xPercent properties throughout the demo. To allow for things to alternate between instances of the sliders it might make sense to pass in a 1 or -1 as a parameter to a function where you create the slider. I talk about using functions and loops to write code more efficiently in this CSS-Tricks article. I highly recommend it so you get a better grasp of how to approach this sort of thing.

[pietM]

Thanks for the prompt feedback, Zach! 

 

I'll review the guide and appreciate the nudge on direction. I'll spend some time with utility methods next. 

Thanks for all! 
M