Показать сообщение отдельно
  #3 (permalink)  
Старый 29.09.2020, 15:40
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,725

Мне кажется неразумным писать отдельно для таучей и для мыши.
Есть же универсальные pointerEvent.
Для одного касания работает даже в ИЕ11

<!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 = -1
   var down = false
   ul.style.width = `${length * 100}%`;
   div.addEventListener("pointerdown", function(e) {
	pid = e.pointerId
	down = true
	e.preventDefault()
     star_touch = e.clientX;
     ul.style.transition = '0ms';
   });
   div.addEventListener('pointermove', function(e) {
	if (down && 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;
     down = false
     }
   });
   var fluentslide_recommend = function() {
     var width = items[0].offsetWidth;
//     index += distance > stop_touch ? 1 : -1;
     index += distance > stop_touch ? 1 : distance < stop_touch ? -1 : 0;
     index = Math.max(0, Math.min(index, length - 1));
     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>

Последний раз редактировалось voraa, 29.09.2020 в 15:55.
Ответить с цитированием