-
-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Draggable on desktop #33
Comments
😬 Ahh, yes that's a great question… Quick AnswersThe problems:
The fix:
If the native snap is still too jarring, I'd recommend considering Flickity as a replacement for sliders that need richer interactions like dragging on desktop. 🐭 Draggable ExampleThe browser's native snap can be jarring when you release your mouse halfway between slides, but here's a quick prototype showing how you might implement the draggable behavior from https://htmldom.dev/drag-to-scroll with Snap Slider: https://codepen.io/tannerhodges/pen/eYVwjEa 2022-06-22.Snap.Slider.Draggable.Example.mp4📝 Longer AnswerFor better or worse, it seems like browsers have standardized on an "eager snap" behavior. I haven't dug in to fully understand how or why this is yet, but in the meantime I've worked around it by temporarily disabling CSS Scroll Snap. Ideally, I'd expect I haven't looked around much yet, but if it hasn't already been brought up, I think this would be a great suggestion for the Scroll Snap spec: that either the browser should automatically smooth snap elements into position by default, or that developers should have a way to opt-in to that kind of behavior (e.g., via As for Snap Slider, I currently don't have desktop dragging as a feature in my v3 roadmap. Maybe something to consider for v4? Or as a kind of extension? 🙏 Happy to look into other code examples, or brainstorm if you have other questions/suggestions for how to handle desktop dragging with Snap Slider. Hopefully this helps some in the meantime. |
Hey @merijnponzo, checking in here. ❓ Did this help solve your problem? |
Hi Tanner, thanks for the codepen, it's looking good already. I tested with full with images instead of half images and indeed you have a problem scrolling half way.
So i tested local by adding some smooth behaviour when the mouse is released.
So maybe with the help of using the thanks |
Hello @tannerhodges thanks for your library. I also work with barty's library (scrollsnapslider) but I also wanted to use yours. On macOS I find that the drag and drop is not great via the codepen code. So if I understand correctly by reading the post above you do not intend to implement it in the current version? Thanks Nicolas |
Hi! I played around with snap-slider for desktop dragging. Like @tannerhodges said scroll-snapping and (css) smooth behaviour with javascript dragging doesn't play well together.
Github So the only thing is that it looks like the current slide is one behind, but i'm sure that can be fixed. I have to add some listeners for resizing the window, because i think that getScrollSnapPositions would have different snapping points then. So maybe this can be the start of kinda plugin, both scroll-snap-api and best |
Hello Tanner,
Any idea how I would make the slider also draggable for desktop devices.
I tried to implement something like this
https://htmldom.dev/drag-to-scroll
But I guess scroll-snap and the normal scroll-behaviour are clashing.
I tested out
https://github.com/barthy-koeln/scroll-snap-slider/blob/main/src/ScrollSnapDraggable.js
But this doesn't work great on wide screens
The text was updated successfully, but these errors were encountered: