Jump to content


Draggable conflicting with trackpad swiping

Go to solution Solved by Cassie,

Recommended Posts

I'm trying to replicate the behavior of Google ads carousels that allow both dragging and swiping with a track pad.

At first, this demo appears to work, but I quickly ran into problems. For example, if you drag the carousel a little bit to the left, and then switch to using the trackpad to swipe the rest of the way to the left, and you'll see that you can now swipe past the end of the carousel content. The bounds are no longer respected, and you'll see the pink background of the wrapper div, which should be impossible.

Grateful for any suggestions. Thanks!


See the Pen xxXYYdb by ericchenry (@ericchenry) on CodePen

Link to comment
Share on other sites

Thanks so much, Cassie. I appreciate it. I'm a bit confused about one thing. My goal is to get the carousel to be draggable but also to move by swiping on a trackpad. At least for me, I can't get the carousel in your demo to move via my trackpad (i.e., two-finger swipe on my Mac laptop). Any thoughts?

Link to comment
Share on other sites

  • Solution

Ah ok, I see. Apologies. Misread the question. 


This should work!

See the Pen YzreMro by GreenSock (@GreenSock) on CodePen


type: "scrollLeft" adds a div, so had to add this to the css


.drag-wrapper > div { height: 100%; }

  • Thanks 1
Link to comment
Share on other sites

Cassie, this looks fantastic! I'm going to try integrating your solution into my code. Thanks so much!

  • Like 1
Link to comment
Share on other sites

I was able to get your solution into my code. 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.