2

I have here such slider:https://jsfiddle.net/args91L4/ how do I get it to work on touch screens, more precisely what are the ways without third-party plugins on vanilla js or pure jquery? I thought to track mouse events like:

.mousedown();
 //Start moving
.mousemove ();
 //Track coordinates
.mouseup();
 //end moving

how to implement it? Or there are ways easier?

Alex
  • 113
  • 10

1 Answers1

2

You're probably not looking for mouse events, but touch events, e.g. touchstart

It's not so easy, though, as you need to decide after every touch what the user probably wanted to achieve. If he scrolls down to the left, did he want to slide to the left or did he just want to scroll down and wasn't that precise? Or did he want to click and mistakenly moved a little bit to the right? This requires quite a lot of calculations and assumptions and may be quite hard.

Therefore I'd recommend you to use a lib like hammerjs for this, which simplifies this configuration and comes with some pretty solid defaults. In hammerjs you would probably use the swipe recognizer for detecting the user wanting to slide to the left or right like this

var hammerInstance = new Hammer(element, options);
hammerInstance.on('swipeleft', function(ev) {
  ... // slide to the left
}
MattDiMu
  • 4,873
  • 1
  • 19
  • 29
  • 1
    Thanks, it's really easier, but I have to load an additional framework though a small one (1kb). My goal is to learn how to do it using vanilla js or jquery (without frameworks like jquerymobile), but thanks for the answer!! – Alex Aug 18 '17 at 07:54