1

So, here's the thing. I am using this library

This works by having a container div full of img elements, and changing their respective z-index depending on the mouse position while hovering the container. My goal is for it to work with a swiping finger instead of a hovering mouse.

After a fair bit of research I only found solutions similar to this, but it does not help me because my library uses .hover() in jquery and not the css :hover state. I also tried mmy luck with an .ontouchmove replacing the .hover() but it broke the whole thing, I'm pretty sure I did not even use it correctly, I am am pretty lost with javascript without jquery.

So how could I possibly simulate/make this work with swiping a finger on the screen ? I'm a bit lost :(

François Lacruche
  • 19
  • 3
  • Does this help? https://stackoverflow.com/a/2891155/11592836. Basicly as soon as the touch starts, you probably want to check in which div (element) the touch currently is. Then based on which div, change image z-index. But I haven't tested the startTouch functionalities so it might not work out. – Allart Nov 12 '21 at 13:38
  • So I tried this method but it only works when you start by touching the element associated with the hover. It does take in account when you start touching elsewhere and you swipe your finger onto it :/ I don't know how to check which div is "currently touched". – François Lacruche Nov 12 '21 at 16:08
  • You might find some answers or at the very least some clarity after reading this article that talks about how mouse vs touch works and its differences. [Cross device inputs design for touch vs mouse](https://prototypr.io/post/cross-device-inputs-design-for-touch-vs-mouse/) – slashroot Nov 14 '21 at 10:11
  • Thank you very much I'll read all of that :) – François Lacruche Nov 15 '21 at 10:00

0 Answers0