Search code examples
javascriptmouseeventswipephotoswipe

swipe gesture with mouse on desktop, like Photoswipe, but animate a div


I'm searching for a script like Photoswipe that works on desktop on mouse events, simulating swipe gestures. Photoswipe without thumbnails is perfect - only I want to animate not only images but a whole div!


Solution

  • The first good-looking result was a jQuery plugin called jQuery mouseSwipe. But this script only moves around a parent div which contains the items visually moved around. If that is not enough, you should consider writing something for yourself.

    Listen to mousedown and mouseup events and check the distance from the startpoint to the endpoint. If it is higher than a threshold you defined, let's say 100 Pixel, go to the next or previous element, based on the direction of the movement.

    If you want it to be animated, you should also listen to the mousemove event and move the element around.