Jump to content
Search Community

Looping flexbox slider/"panner" with variable width slides

unvs test
Moderator Tag

Recommended Posts

I have a draggable slider/"panner" that is constructed a little differently due to some demands:

 

- It has to work with percentage widths for the slides / flexbox

- It has to work with differing slide widths

 

This has worked all right in my solution, but now I'm trying to "loop" the slider and all examples I can find are using a draggable connected to a tween's progress and I'm not able to see how I can make this work in my situation.

 

Any pointers here? I'd suspect I'd have to do some dom manipulation by moving the first slide to the end etc but I'm not really sure where to start.

 

Any and all advice appreciated!

See the Pen abZGroa by unvs (@unvs) on CodePen

Link to comment
Share on other sites

3 hours ago, unvs said:

I'm not able to see how I can make this work in my situation.

What's causing that? The concept is the same :) 

 

3 hours ago, unvs said:

I'd suspect I'd have to do some dom manipulation by moving the first slide to the end etc but I'm not really sure where to start.

Not necessary. Use GSAP's modifiers! Here's a relevant thread:

 

  • Thanks 1
Link to comment
Share on other sites

Thanks for taking a look, I really appreciate it!

 

The examples I found uses absolute positioning on the slides, and a fixed height on the wrapper. I was hoping to avoid that for easier styling, but I forked one of the examples and tried tweaking it to my needs:

 

See the Pen ExyRqgZ by unvs (@unvs) on CodePen

 

I'm a little unsure of how to operate the arrow buttons though :D 

 

Now the backwards arrow goes forward and vice versa. Also it stops working when it arrives at the wrapping point. Not quite sure how to tackle that?

Link to comment
Share on other sites

You don't have to use absolute positioning but doing so makes your calculations easier. I'm not sure why it'd be easier styling if you didn't use absolute positioning :) 

 

Unfortunately we don't have the capacity to do it all for you. Do you have a specific question that we can help out with?

  • Thanks 1
Link to comment
Share on other sites

Hah, yes, I'm sorry - there are 2 things I'm unclear on how to solve in this codepen:
 

See the Pen ExyRqgZ by unvs (@unvs) on CodePen

 

1. I have an array of snap offsets which won't work on the modified slides. If I click and drag towards the left (to go to 2, 3, 4 etc), it snaps in place until 6, but then it stops (since it doesn't have any more values in the snap offset array, I guess?). I'd like to have it snap to the next 1 and 2 and 3 and so on. Can this be wrapped somehow?

 

2. Clicking the left and right arrows work fine, but if you click the right arrow several times (until you are well into "loop 2"), and then drag it afterwards, it rolls back and snaps to the last known offset. I suspect this is connected with problem #1?

Link to comment
Share on other sites

  • 1 month later...

A little update on this:

 

- I've managed to fix the operations with arrows -- it loops as it should finally :) 

- I've *ALMOST* figured out the dragging/snapping. There is a bug I'm not sure on how to solve. If you drag from 1 to 6 (backwards), the threshold for snapping is not the same as the other slides. If you only move a couple pixels it still will snap to 6. It is wrong when moving the other way as well -- to make it snap to 1 when sliding from 6, you have to drag all the way to pass the 0 threshold.

 

Does anyone have any ideas on how to solve that?

See the Pen ExyRqgZ by unvs (@unvs) on CodePen

  • Like 1
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...