Comments (7)
Thanks for the example, I don't think there is a mistake on your side.
Hope I can provide an improvement soon.
from embla-carousel-wheel-gestures.
Hi @Ocupe
can you please check, if this demo is a improvement with your mouse?
https://37f5w.csb.app
https://codesandbox.io/s/little-cherry-37f5w?from-embed=&file=/App.svelte
I was able to reproduce a similar effect as you described for a older mouse I found, and it is much better like this for me.
I gotta say tho, that a mouse that only emits line-precision (instead of pixel-precision) will never feel as good as a pixel-precision mouse or trackpad (eg. Magic Mouse or Microsoft Surface Trackpad).
Can you provide me with the operating system you test with? And browser?
Cheers
from embla-carousel-wheel-gestures.
@xiel I tested your app (https://37f5w.csb.app/) with Safari, Firefox and Chromium on MacOS Catalina (10.15.7) and it works much better now! Faster scrolling movements are still a bit unexpectedly fast but still much better.
Intentionally or not, your new version also fixed a second bug for me. When I changed the scroll direction with the track pad (without releasing it), the carousel no longer scrolled. Only after I "restarted" the scroll, it worked again. This is now also gone 🎉
Overall I'm super happy with the result and your fast fix! Thank you and vielen Dank 👍
from embla-carousel-wheel-gestures.
This was fixed in release v1.1.1 📦
@Ocupe Thanks for opening this ticket and validating the fix!
from embla-carousel-wheel-gestures.
Hi @Ocupe
what (kind of) mouse are you using? Does it support pixel precision scrolling or does it scroll in lines?
Cheers
Felix
from embla-carousel-wheel-gestures.
thank you @xiel for your reply. I'm not sure what kind of precision my mouse supports. But after your commend I checked with 5 fairly new and different mice, and had the same problem.
Because I can't control what mice possible users have I would like a solution that works for all mice.
this is my code, maybe I made some stupid mistake? (it is using Svelte but looks like normal JS)
<script>
import EmblaCarousel from "embla-carousel";
import { setupWheelGestures } from "embla-carousel-wheel-gestures";
import { onMount } from "svelte";
let emblaNode;
let embla;
onMount(() => {
const options = {
loop: true,
axis: "y",
skipSnaps: true,
align: "start",
draggable: true
};
embla = EmblaCarousel(emblaNode, options);
setupWheelGestures(embla);
return () => {
if (embla) embla.destroy();
};
});
</script>
<div class="embla">
<div class="embla__viewport" bind:this={emblaNode}>
<div class="embla__container">
{#each new Array(26) as x, index}
<button class="embla__slide">{index}</button>
{/each}
</div>
</div>
</div>
<style>
.embla {
top: 0px;
right: 0px;
width: 150px;
}
.embla__viewport {
overflow: hidden;
}
.embla__container {
display: flex;
flex-direction: column;
height: calc(100vh - 5vh);
will-change: transform;
}
.embla__slide {
position: relative;
flex: 0 0 5vh;
background: lightsalmon;
overflow: hidden;
}
</style>
Let me know if I can provide further content to help!
from embla-carousel-wheel-gestures.
@Ocupe Thanks for checking! I'm glad that it helped 🥳
Yes, I also noticed the behaviour improved in other situations as well, so I'm very happy with this update.
I will do a bit more testing and will hopefully able to release this on the stable channel tomorrow.
Currently it is released on the beta channel as 1.1.1-beta.0
from embla-carousel-wheel-gestures.
Related Issues (20)
- Doesn't seem to be working at all. HOT 2
- Scrolling Intensity HOT 3
- Convert to Plugin HOT 6
- Provide UMD bundle
- Customize scroll axis HOT 4
- wheel-gestures not working? HOT 3
- Global options HOT 3
- Support use in Shadow DOM HOT 2
- Code assumes the presence of `process` HOT 6
- Target option HOT 4
- Remove Peer Dep HOT 4
- Support for embla-carousel v8 HOT 5
- Add E2E Test to verify functionality
- Cannot install with NPM HOT 1
- Add option to use both scroll axes HOT 2
- NPM install dependency conflict HOT 7
- Add option for smooth slide change on scroll with little strength.
- "rtl" direction doesn't work with the images when given loading lazy property HOT 2
- Disable Scroll indication? HOT 2
- When more than 1 carousel are placed within the same page, scrolling 1 will affect the other
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-wheel-gestures.