Comments (10)
Hi David (@davidjerleke),
thanks for your responses and building this awesome slider! If I had the necessary skills, I'd help you implementing these features...
Meanwhile, you could do a workaround this by checking how far the pointer has moved from pointerdown to pointerup, and if it's more than let's say 5px ignore any click events.
Good idea, this would serve the purpose for now.
Greetings,
Jeff
from embla-carousel.
Hi Jeff (@Tscheffrey),
Thank you for opening this issue!
You have a good point 👍. Thinking about these event names, they are pretty unfortunate as you describe. Considering the current implementation and behaviour of dragStart
and dragEnd
they should be renamed like below to better represent what they actually do:
dragStart
-->pointerDown
dragEnd
-->pointerUp
If you don't mind you can post a CodeSandbox example for other users to understand this issue better.
👉 Suggestion
I agree with you that this needs attention. Maybe we should consider achieving something like this:
-
dragStart
--> When pointer is down and has moved from its original position. -
dragEnd
--> When dragStart has fired and pointer is released. -
pointerDown
--> When pointer is down. -
pointerUp
--> When pointer is released.
What do you think? Does this make sense?
Best,
David
from embla-carousel.
Hey David (@davidjerleke),
thank you for your quick reply. I'll make a CodeSandbox if I have some time today.
I totally agree with what you suggested, as the pointerDown
/ pointerUp
event might also be useful for some users. This way, we can clearly differentiate between when the touch of the user starts and when the actual dragging occurs.
Suggestion
We might want to add threshold which will hold back the dragStart
event if the finger of the user moves only slightly (e.g. less than 5px). That way, slight inaccuracies in the touchscreen will not negatively effect the user experience.
from embla-carousel.
Hello Jeff (@Tscheffrey),
Thank you for the feedback and your ideas 👍.
Sounds good. Maybe we could expose the drag distance as a parameter like so:
embla.on('dragStart', dragDistance => {
// Do something here
})
And then it's up to the user to implement the threshold logic:
const myDragThreshold = 5
embla.on('dragStart', dragDistance => {
if (dragDistance > myDragThreshold) {
// Do something here
}
})
What do you think?
Best,
David
from embla-carousel.
Hi David (@davidjerleke),
I think this wouldn't work because as I understand, the dragStart
event will only be fired once when the dragging starts. This means that there is no way of knowing when the threshold actually starts to get larger than what your threshold is. Also, there would be no way of preventing the actual dragging itself, even if you know that your threshold has not been exceeded yet.
The only way how this might work is to have another event that fires when dragging occurs, before the result is rendered to the screen, maybe called dragging
. Then we could have something similar to e.preventDefault()
with other events, in order to cancel the render.
That could look like this:
const myDragThreshold = 5
embla.on('dragging', e => {
if (e.dragDistance < myDragThreshold) {
e.preventDragging()
}
})
But I guess at this point, it might be easier to just have the drag threshold as a config parameter:
const embla = EmblaCarousel(emblaNode, {
dragThreshold: 5,
...
})
Jeff
from embla-carousel.
Hi Jeff (@Tscheffrey),
You're right. Of course, as you say dragStart
will only fire once. What I forgot to mention is that Embla is already using a drag threshold today. So just by changing the dragStart
behaviour to following suggestion:
When pointer is down and has moved from its original position
We will achieve both the threshold
and the desired dragStart
behaviour. If you think it makes sense for the user to be able to configure the drag threshold, would you mind opening an issue for this separately? Or do you want me to do it?
Thanks!
Kindly,
David
from embla-carousel.
Hi David (@davidjerleke),
What I forgot to mention is that Embla is already using a drag threshold today.
That is great! I imagine that the dragStart
event should only be fired when the threshold is exceeded anyway, do you agree? I think that thats the most logical way of doing it.
I'll open up a ticket concerning the drag threshold configurability.
Jeff
from embla-carousel.
Hello Jeff (@Tscheffrey),
Thank you for your quick response. Cool, I hope I will have some free time to implement these features soon. Thanks for your patience.
Meanwhile, you could do a workaround by checking how far the pointer has moved from pointerdown
to pointerup
, and if it's more than let's say 5px ignore any click events. I really understand that this by no means is an optimal solution, it's just a suggestion to a temporary solution until these features are implemented.
I imagine that the dragStart event should only be fired when the threshold is exceeded anyway, do you agree?
I completely agree and think this makes sense 👍.
Thanks a lot for your ideas and taking time to discuss this.
All the best,
David
from embla-carousel.
Hello Jeff (@Tscheffrey),
I'm working on this issue and would appreciate feedback from you. The issue discussed above with dragStart
firing is in progress, but it's a breaking change so it will be released with v.3 as soon as possible. But I've implemented the click part you described:
This would be useful to me because I am currently listening to both click events on items and dragStart/dragEnd Events and change styles accordingly.
I've released a click check for Embla:
embla.clickAllowed()
Please read about it in the release description. You can see it in action in this CodeSandbox (it's also related to issue #24). This method is an opt-in feature and here is how it works: It returns false
if:
Mouse Pointers
- Mouse drags the carousel.
Touch Pointers
- Touch drags the carousel.
- Carousel is in motion (i.e. is scrolling).
Otherwise it will return true
. I'd very much appreciate your feedback on this. Try v2.6.1
for this feature. Thank you in advance!
Kindly,
David
from embla-carousel.
I've taken the unfortunate naming into account and renamed the drag events to pointer events:
dragStart
-->pointerDown
dragEnd
-->pointerUp
This has been implemented and released with version 3.
from embla-carousel.
Related Issues (20)
- [Bug]: export the types HOT 2
- [Bug]: UI issues when removing slides HOT 6
- [Bug]: embla-carousel-autoplay - stopOnMouseEnter NOT WORKING on mouse enter, but only when you click inside the wrapper. HOT 4
- [Bug]: Event Hooks Do Not Get Called With Next 12 + React 18 HOT 5
- [Bug]: Animation doesn't work when updating options with `reInit` HOT 7
- [Bug]: Changing axis direction breaks carousel HOT 9
- [Bug]: Autoplay and AutoScroll not destroyed properly
- [Bug]: When the direction is set to 'rtl' and the loop is set to true, it doesn't loop infinitely HOT 1
- [Bug]: canScrollNext method returns false even when there are items to scroll HOT 1
- [Bug]: AutoScroll position jumps when clicked and dragged HOT 7
- [Bug]: Input click block after dragging HOT 2
- [Feat]: Add TypeScript moduleResolution: bundler support HOT 11
- [Bug]: Autplay stops working after drag HOT 2
- [Bug]: Cannot find module 'embla-carousel/components/Options' or its corresponding type declarations. TypeScript, React with Vite HOT 2
- [Bug]: Flickering when adding icon or image in slides (8.0) HOT 3
- [Bug]: Direction rtl reverses y axis direction HOT 5
- [Bug]: Slide hanging if overdragged/scrolled HOT 5
- [Bug]: Angular autoplay error HOT 1
- [Bug]: Autoplay fast scroll when opened in a new tab HOT 7
- [Bug]: no specific name for plugin import, have to use "index" instead HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from embla-carousel.