Swiper.js, почему не работает событие touchMoveOpposite?

Question

[webmak]

Всем привет! Есть слайдер на плагине Swiper, он движется свободно, без фиксированных позиций, то есть своеобразная лента с элементами, которая все время в движении. Этот слайдер можно свайпать, двигать. Если её подвинуть, то через какое-то время она пойдёт опять с выставленной скоростью в заданном направлении. Мне нужно, чтобы при свайпе влево, данный слайдер поменял своё направление движения (сейчас он у меня движется только влево)
Что в коде: через консоль проверил событие touchMoveOpposite и нечего не происходит.

$(document).ready(function () {
	if ($(".swiper-container1").length > 0) {
		var swiper = new Swiper('.swiper-container1', {
			slidesPerView: 8,
			loop: true,
			grabCursor: true,
			autoplay: {
				delay: 0,
				disableOnInteraction: false
			},
			speed: 7000,
		});
	}
	swiper.on('touchMoveOpposite', (event) => { 
		console.log('Work1')
	})
});

Ссылка на сайт со слайдером:
test-daiger.slk-portfolio.mcdir.ru

Answer 1

[Athanor]

Скорее всего, чтоб осуществить задуманное вам стоит воспользоваться комбинацией событий touchStart и touchEnd. Будет выглядеть это как-то так:

$(document).ready(function() {
  if ($(".swiper-container1").length > 0) {
    var startMoveEvent;
    var swiper = new Swiper(".swiper-container1", {
      slidesPerView: 8,
      loop: true,
      autoplay: {
        delay: 0,
        disableOnInteraction: false
      },
      speed: 7000
    });
    swiper.on("touchStart", event => {
      startMoveEvent = event;
    });
    swiper.on("touchEnd", event => {
      var sliderMovedToLeft = event.offsetX - startMoveEvent.offsetX < 0;
      console.log("sliderMovedToLeft", sliderMovedToLeft);
    });
  }
}

DEMO

Comments

[webmak]

Подобное уже писал, есть недоработка, если свайпать так, как показал на скриншоте, слайдер покатится налево (по импульсу), а потом направо(так как свайпа больше в правую сторону). Мне нужно, чтобы читалось именно направление конечное. То есть если свайпнуть так, как на скриншоте - должно считаться влево, а не вправо. Данный скрипт ловит только по прямому свайпу получается

[Athanor]

webmak, тогда попробуйте так:

$(document).ready(function() {
  if ($(".swiper-container1").length > 0) {
    var lastMoveEvent;
    var swiper = new Swiper(".swiper-container1", {
      slidesPerView: 8,
      loop: true,
      autoplay: {
        delay: 0,
        disableOnInteraction: false
      },
      speed: 7000
    });
    swiper.on("touchMove", event => {
      if (lastMoveEvent) {
        var sliderMovedToLeft = event.clientX - lastMoveEvent.clientX < 0;
        var sliderMovedToRight = event.clientX - lastMoveEvent.clientX > 0;
        sliderMovedToLeft !== sliderMovedToRight &&
          console.log(
            "movedToLeft/movedToRight",
            sliderMovedToLeft,
            sliderMovedToRight
          );
      }
      lastMoveEvent = event;
    });
  }
}

DEMO

[webmak]

Athanor, чертовски круто, спасибо огромное, не подскажешь теперь последнюю часть - куда вставить данный скрипт swiper.params.autoplay.reverseDirection = true; (данный скрипт разворачивает карусель в другое направление) Он должен получается срабатывать в зависимости от направления

[webmak]

if ($(".swiper-container1").length > 0) {
		var lastMoveEvent;
		var swiper = new Swiper('.swiper-container1', {
			slidesPerView: 8,
			loop: true,
			freeMode: false,
			grabCursor: true,
			autoplay: {
				delay: 0,
				disableOnInteraction: false
			},
			speed: 3000,
		});
		swiper.on("touchMove", event => {
			if (lastMoveEvent) {
			  var sliderMovedToLeft = event.clientX - lastMoveEvent.clientX < 0;
			  var sliderMovedToRight = event.clientX - lastMoveEvent.clientX > 0;
			  sliderMovedToLeft !== sliderMovedToRight
				if (sliderMovedToRight == true) {
					swiper.params.autoplay.reverseDirection = true;
				} else {
					swiper.params.autoplay.reverseDirection = false;
				}
			}
			lastMoveEvent = event;
		});
	}

Оказывается я что-то могу Athanor, ЕЩЕ РАЗ СПАСИБО БОЛЬШОЕ, ДАЙ БОГ ЗДОРОВЬЯ ( на фоне звук - брызги святой водой)

[webmak]

Athanor, а почему не работает на телефоне? Не отслеживается походу данной событие на сенсорных экранах, хотя в документашке говорится, что фингертачс должны работать

[Athanor]

webmak, в хроме если включить тач режим, то работает, пока не сожмешь до мобильного разрешения. У меня вообще на мобильных экранах ваш сайт не скролится, у вас так же? Я думаю, что дело в библиотеке fullpage.js, это она блочит экран. Тут уже нужно разбираться, с наскоку не получается. Я бы рекомендовал попробовать полностью отключить ее, удалив в том числе и все стили. Есть ощущение, что она некорректно подключена, обратите внимание на inline стили в html, помоему, их, как минимум, не должно быть. Ну а затем, внимательно, по шагам читать документацию и повторять то, что делают там

[webmak]

Athanor, в мобилке fullpage работает нормально. При отключении fullpage.js все равно скрипт с каруселью на телефоне не работает. Я браню swiper.js - очень много ошибок в плагине. Ещё поизучаю, поэкспериментирую. Огромное спасибо ещё раз)