Swiping doesn't work on Android devices

[roskad]

I've encountered a problem that on any android device as well as on the desktop using devtools swiping doesn't work. It even doesn't work on the official demo page. However, it is working on apple devices.

So I've done a bit of digging and come up with this workaround.

Inside the "dragStart" function I'm checking if the device is mobile. And if it is I change a bit starting points:
function dragStart(e) { if (!navigationDisabled) { let speed = (current_item.settings.navSpeed * 0.84); content.style.transition = 'margin ' + speed + 'ms ease-out, opacity ' + speed + 'ms ease-out'; if (body.classList.contains('touch')) { startY = endY = e.touches[0].pageY; startX = endX = e.touches[0].pageX; } else { startY = endY = e.pageY; startX = endX = e.pageX; } startouch = true; } }

Also, I've added "dragMobile" function. It's pretty much the same as the original "drag" function except I adjusted endX, endY variables a bit;
function dragMobile(e) { if (startouch && !navigationDisabled) { let movedTouch = e.touches[0]; endX = movedTouch.pageX; endY = movedTouch.pageY; diffX = endX - startX; diffY = endY - startY; let absdiffX = Math.abs(diffX); let absdiffY = Math.abs(diffY); console.log(startX); if ((absdiffX > absdiffY) && (absdiffX <= 180)) { let diffopac = (1 - absdiffX / 180) * 1.5; e.preventDefault(); content.style.marginLeft = diffX + 'px'; content.style.opacity = diffopac; } } }

And on the "touchmove" event I'm using the new function "dragMobile" instead of the original "drag".

P.S. If someone can rewrite this in a more efficient way it would be awesome.

[jswebschmiede]

you can change the drag and dragStart function this way.

dragStart:

	function dragStart(e) {
		if (!navigationDisabled) {
			let speed = current_item.settings.navSpeed * 0.84;
			content.style.transition =
				"margin " + speed + "ms ease-out, opacity " + speed + "ms ease-out";
			startX = e.type === "touchstart" ? e.touches[0].pageX : e.pageX;
			startY = e.type === "touchstart" ? e.touches[0].pageY : e.pageY;
			startouch = true;
		}
	}

drag:

	function drag(e) {
		if (startouch && !navigationDisabled) {
			endX = e.type === "touchmove" ? e.touches[0].pageX : e.pageX;
			endY = e.type === "touchmove" ? e.touches[0].pageY : e.pageY;

			diffX = endX - startX;
			diffY = endY - startY;

			let absdiffX = Math.abs(diffX);
			let absdiffY = Math.abs(diffY);
			
			if (absdiffX > absdiffY && absdiffX <= 180) {
				let diffopac = (1 - absdiffX / 180) * 1.5;
				e.preventDefault();
				content.style.marginLeft = diffX + "px";
				content.style.opacity = diffopac;
			}
		}
	}

[nicolafranchini]

Thank you @jswebschmiede , I've just published the update with a small edit on your code.
The variables startX and startY should also be equal to endX and endY inside of dragStart(e), otherwise the drag starts also with simple clicks:

           startX = endX = e.type === "touchstart" ? e.touches[0].pageX : e.pageX;
           startY = endY = e.type === "touchstart" ? e.touches[0].pageY : e.pageY;