Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Nick.Ls

Draggable Infinite Carousel with Snap and Indexing

Recommended Posts

Hi everyone,

 

I've been using GSAP for so long that I think I am having a weird brain freeze and I am unable to create an indexing where the middle

image on the slider will take a, let's say, "selected" class. 

 

I have used a previous implementation I found in my codepen and I have commented the section where I started my effort of getting an index

value for start. Under the snap function.

 

Any help would be greatly appreciated!

See the Pen ZErXqNX by Nick_Ls (@Nick_Ls) on CodePen

Link to comment
Share on other sites

Hi @Nick.Ls. Thanks for being a Club GreenSock member! 🙌

 

There's a lot of code in there to digest and I'm not 100% sure what you're asking for here. Are you wanting help to know how to calculate the index of the element that's in the center of a fixed-width area like that? Or dynamically based on a resizing viewport area, etc.? 

 

Typically we really try to stay focused on GSAP-specific questions in these forums (steer clear of general logic issues), but if there's something I can quickly help with I'll do my best. It would certainly help if your minimal demo only had the absolutely essential pieces to show the problem you're trying to solve (a few colored <div> elements is fine). 

 

Also, you may want to look at the helper function in the docs for seamlessly looping things on the x-axis. There's even a draggable version. 

  • Like 2
Link to comment
Share on other sites

Hi Jack,

 

Everything works as intended at this point except the feature of returning the viewable images and specifically the middle one.

What I am actually trying to accomplish is a way to add a class in the middle image after I drag the carousel.

I can't figure it out though doing through draggable.

 

I have tried creating some kind of index calculation but with no luck under the helper functions. See the snap() function where I have commented my progress.

Link to comment
Share on other sites

Hi again,

 

20 hours ago, GreenSock said:

Also, you may want to look at the helper function in the docs for seamlessly looping things on the x-axis. There's even a draggable version. 

I've seen also the draggable demo on the helper function and same question applies there? How could I possibly add a class to the middle image once the drag ends animating?

 

I am going to research a bit more through that demo but that's a lot of code to process. I'll come back with my findings if I come close to a solution on

my situation.

 

Thanks!

 

Link to comment
Share on other sites

If you'd like some more help, @Nick.Ls, we'd be happy to take a look at a minimal demo where you tried applying the helper function. 

Link to comment
Share on other sites

Hi Jack,

 

I have used the drag carousel from the helper functions where with tl.current() I retrieve the index increment it to match the center index always and then I pass as a class as I intended to do from the beginning. And it works!

 

I can give you a demo for future reference if you need.

 

Thank you for your interest though! Helper function gave me what I needed it to move on.

  • Like 1
Link to comment
Share on other sites

It's always helpful for future thread readers to post a solution! ☺️ Glad you got it sorted.

Link to comment
Share on other sites

Here you go,

 

It's a copy from the draggable carousel on Helper Function with some additions to calculate the middle item. I have commented on the code

so you can with ease the additions. And of course I am available if someone needs some further clarification.

 

(the red box that appears is your center element)

See the Pen mdXxLXJ by Nick_Ls (@Nick_Ls) on CodePen

  • Like 2
Link to comment
Share on other sites

Thanks for popping back!

 

I've tweaked it a little as you weren't wrapping the value returned so it was a bit buggy (didn't highlight 1 and 2) But overall great job figuring this out.

See the Pen zYRWmOb?editors=0011 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

Oh thanks @Cassie,

 

I hadn't noticed that bug... Guess the "lottery spinner" didn't land on 1 or 2 to see the error. You're right!

 

Nice!

  • Like 1
Link to comment
Share on other sites

I spent a bunch of time reworking the helper function to accommodate a new option, center: true which will basically make the active element be the one that's centered in the container. Here's a fork that adds an "active" class to the element in the center, and I made one of the elements wider just to make sure it still works when they're not all the same width: 

See the Pen gOvvJee?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I added an onChange callback as well which gets called when the "active" element changes. It's responsive, and the momentum-based snapping works with the centering too. 👍

 

Does that help? 

  • Like 5
Link to comment
Share on other sites

Hey Jack,

 

That is truly a rework! Yes, it helps a lot! My code did the work but this is educational the least. I am going to break down the code to see

what you actually did. Very helpful!

 

Thanks again!

 

  • Like 2
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.
×