Horizontal Gallery Drag and Scroll - Resize and Drag Issues

[iamterryclark]

Hello,

I am trying to create a horizontal scroller with drag interaction. the images are in all different shapes and sizes, I have two issues currently I'm not sure how to resolve.

Note: The example is based on code I have in nextjs. The styling of the example is not exact to what I have in there, really they should be a percentage of the .image div. but was not able to get the exact styling. Still the issues below persist so hopefully its not to do with the css....

1) Dragging to the end of the images goes outside of the range. How might I bound this properly? I have tried to use `bound: gallery` and scroller to no avail.

2) Resizing the window will screw around with the scroller and i am unable to get from beginning to the end of the full list of images.

3) Bonus - I would love to also get snapping involved on the images so that any images upon dragging will get centred on the screen.

Would really appreciate some help with this.

Many thanks in advance

See the Pen dyqzRyL by iamterryclark (@iamterryclark) on CodePen

[Rodrigo]

Hi,

 

This seems related to this other thread:

 

Please let us know if you want to keep track of this thread or the other I just linked above, so we can focus our attention in just one of them. Feel free to edit either one to include both demos on them.

 

Happy Tweening!