рони,
Не работает с тоучем.
Забыли
touch-action: none; (пост 3 стр 12)
Ну и при касании двумя (и больше) пальцами возникают всякие неоднозначные эффекты. (Пост 3 тоже этим немного грешит)
Так, что лучше проверять pointerId
(Хотя без down вполне можно обойтись)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div.slide {
width: 70%;
margin: 0 auto;
overflow-x: hidden;
position: relative;
touch-action: none;
}
.slide ul{
margin: 0;
padding: 0;
list-style: none;
display: flex;
transition-duration: 1200ms;
transition-timing-function: cubic-bezier(.3,.58,0,1.12);
}
.slide ul li{
width: 100%;
}
.slide ul li img{
width: 100%; height: auto;
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
var div = document.querySelector(".slide");
var ul = div.querySelector("ul");
var items = ul.querySelectorAll("li");
var length = items.length;
var star_touch = 0;
var distance = 0;
var stop_touch = 0;
var index = 0;
var pid;
ul.style.width = `${length * 100}%`;
div.addEventListener("pointerdown", function(e) {
if (pid === undefined) pid = e.pointerId
down = true
e.preventDefault()
star_touch = e.clientX;
ul.style.transition = '0ms';
});
div.addEventListener('pointermove', function(e) {
if (pid == e.pointerId) {
distance = stop_touch + star_touch - e.clientX
ul.style.transform = 'translateX(' + (-distance) + 'px)';
}
});
window.addEventListener('pointerup', function(e) {
if (pid == e.pointerId) {
fluentslide_recommend();
stop_touch = distance;
pid = undefined
}
});
var fluentslide_recommend = function() {
var width = items[0].offsetWidth;
index += distance > stop_touch ? 1 : -1;
index = Math.max(0, Math.min(index, length - 1));
distance = index * width;
ul.style.transition = '';
ul.style.transform = 'translateX(' + (-distance) + 'px)';
}
window.addEventListener('resize', function() {
var width = items[0].offsetWidth;
distance = index * width;
ul.style.transition = '';
ul.style.transform = 'translateX(' + (-distance) + 'px)';
});
});
</script>
</head>
<body>
<div class="slide">
<ul>
<li><img src="https://picsum.photos/700/400?1" alt=""/></li>
<li><img src="https://picsum.photos/700/400?2" alt=""/></li>
<li><img src="https://picsum.photos/700/400?3" alt=""/></li>
<li><img src="https://picsum.photos/700/400?4" alt=""/></li>
<li><img src="https://picsum.photos/700/400?5" alt=""/></li>
<li><img src="https://picsum.photos/700/400?6" alt=""/></li>
<li><img src="https://picsum.photos/700/400?7" alt=""/></li>
</ul>
</div>
</body>
</html>