Jump to content


Horizontal Gallery Drag and Scroll - Resize and Drag Issues

Moderator Tag

Recommended Posts


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

Link to comment
Share on other sites



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!

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.