Jump to content
Search Community

Draggable Infinite Carousel with Snap and Indexing

Nick.Ls test
Moderator Tag

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

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

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

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 10
  • Thanks 1
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

  • 9 months later...
  • 3 weeks later...
  • 4 weeks later...

Greetings aerra,

 

The helper function used for this example, as I see it, is built to maintain and calculate the widths of the container and the respective items beneath.

 

You surely can achieve a similar example to vertical slider / carousel with gsap but I would go with a fresh approach. There are a lot of examples

based on gsap3 if you search for it in order to find a starting point.

 

Last but not least, post your codepen example here if you make any progress and lot's of people will guide you through to your questions.

 

I believe the experts will correct me if I am wrong about the helper function.

 

Wish you a good day!

Link to comment
Share on other sites

  • 5 months later...

Hi everyone!

Quick question on the topic... Can we make the horizontal loop non repeatable? Just keep all the other features

without having the elements to repeat on the end?

Is it a bad approach to try doing this in this setup rather than just create a draggable container or so? 🤔

Link to comment
Share on other sites

9 minutes ago, Nick.Ls said:

Quick question on the topic... Can we make the horizontal loop non repeatable? Just keep all the other features

without having the elements to repeat on the end?

I'm sure it's possible with enough custom logic tweaking, but it's definitely not a simple thing. The entire point of that helper function was to accommodate infinite/seamless looping/repeating, so there's a ton of challenging logic in there to make that happen. It's beyond the scope of help we can provide for free in these forums, but you're welcome to contact us about our paid consulting services. Or post in the "Jobs & Freelance" forum. 

 

But if you just want to make something draggable within a particular bounds, that should be super simple with Draggable using its "bounds" feature. 

Link to comment
Share on other sites

Thanks for the quick reply Jack!

It's not more of a to-do request to be honest as more as a theoretical question to try accommodate an extra feature inside

my already tweaked slider for future use instead of just creating the scenario I am looking for atm.

I believe this will be the next weekend side task for me.

Thanks again!

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