Opposite direction side-by slide sliders (I know)

[Saul Rosenbaum]

Just when you think you've heard every possible slider suggestion someone asked for this

I found a pretty great wrapping slider example that got me 90% of the way to where I needed to be here in the forums, and truthfully the codepen I've referenced is fine but you'll notice that the left hand items (in this example, the titles) aren't in sequential orderer or in reverse order - and I KNOW there's a better more maintainable way to deal with them, but for the life of me I can't figure it out (and it's pseudo haunting me) 

 

I wouldn't mind if the titles where in ascending numerical order, or in decending numerical order but I just know that my janky solution will eventually bite me in the butt, so any help you can offer would be GREATLY appreciated 

 

tia

Saul

See the Pen 921341c533da4f27f7fa55fa8e07bf70 by sauldraws (@sauldraws) on CodePen

[PointC]

I can't really go into how everything is wired up right now, but I'd highly recommend using GSAP3. That demo is is using GSAP 1.20.2 which is nearly 4 years old. The new syntax is more concise and easier to use.

 

This should help you convert everything.

 

[ZachSaucier]

Hey Saul. This isn't really a GSAP question, but there are two main ways you could set it up to have the HTML in the correct order:

1. Use a form of CSS positioning that rearranges the content (CSS grid where you have full control over the order, absolute positioning with the JS setting the position).
2. Rearrange the DOM order when the page is loading with JS. 

[Saul Rosenbaum]

Hey thanks for the replies - Syntax aside, I'm having a hard time just wrapping my head around how best to structure this 

my initial thought was something simple like this (and word of warning this is CRUDE as heck) (up and down arrow keys move the two containers up and down respectively) but at the point where it would need to repeat (when it reaches either end) I just can't figure out a smart way of doing that 

 

https://codepen.io/sauldraws/pen/bGBqRLL

 

 

[ZachSaucier]

The logic of your original pen is fine if this is all you're trying to do.