Jump to content
Search Community

Wrapping GSAP Auto-Slider Direction and Multi-Sliders?

pietM test
Moderator Tag

Recommended Posts

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, 

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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...