Как настроить «Прикосновения на пальцах», чтобы «Слайд только 1 слайд на TouchMove»? - PullRequest
Новая
       24

Как настроить «Прикосновения на пальцах», чтобы «Слайд только 1 слайд на TouchMove»?

0 голосов
/ 08 апреля 2019

Swiper поддерживает только сенсорное перемещение, чтобы скользить столько слайдов, сколько хочет пользователь, а не по одному на каждое движение. Я нашел решение и хотел поделиться им.

Глобально - это bool, рекомендуемое для предотвращения скольжения несколько раз одновременно одним ударом. Для скольжения только одного Slide / Swipe необходимо включить «touchMove», потому что я использую событие touchMove. «Порог» должен быть установлен так высоко, чтобы никто не мог его использовать (например, 10000 или около того) После этой настройки можно вызвать событие «touchMove» без фактического скольжения. Лучшее в решении: с включением и отключением «allowTouchMove» вы также можете включать и отключать пользовательское сенсорное событие. Отдыхать просто, как показано в коде ниже. 

let touchLimitiation = false;
let SliderConfig = {
   allowTouchMove: false,
   threshold: 10000,
   breakpoints: {
      992: {
         allowTouchMove: true,
      },
   },
   on: {
      touchMove: function(event) {
         // this will change the touch-move to slide only 1 slide pre swipe including the slide-animation
         if(event.movementX < -20 && !touchLimitiation) {
             this.slideNext();
             touchLimitiation = true;
         } else if(event.movementX > 20 && !touchLimitiation) {
             this.slidePrev();
             touchLimitiation = true;
         } else {
             touchLimitiation = false;
         }
      }
   }
new Swiper($(".swiper-container"), SliderConfig);

Надеюсь, это поможет. (Это мой первый пост здесь, так что ... если я могу сделать что-то лучше, пожалуйста, скажите мне.)

Edit: Неважно, я сделал ошибку. Функция touchMove бесполезна, причина, по которой она работала, была сенсорное событие Так что ... я думаю, продолжу искать ...

Edit: Хорошо, нашел решение: 

let memoryStartX = 0,
    touchMoveTrigger = vwConverter($(window).width() < 576 ? 50 : 25),
    SliderConfig = {
    allowTouchMove: false,
    threshold: 10000,
    breakpoints: {
        992: {
            allowTouchMove: true,
        },
    },
    on: {
        touchMove: function(event) {
            let startX = this.touches.startX,
                currentX = this.touches.currentX;

            if(startX > currentX && startX - currentX >= touchMoveTrigger && memoryStartX !== startX) {
                this.slideNext();
                memoryStartX = startX;
            } else if(startX < currentX && currentX - startX >= touchMoveTrigger && memoryStartX !== startX) {
                this.slidePrev();
                memoryStartX = startX;
            }
        },
        resize: function() {
            touchMoveTrigger = vwConverter($(window).width() < 576 ? 50 : 25);
        },
     };
new Swiper($(".swiper-container"), SliderConfig);

function vwConverter(vw) {
    return Math.round($(window).width() * (vw / 100));
}

Моя ошибка заключалась в том, что я использовал переменную, которая не была определена (я понятия не имею, почему я произошел, я проверил ее ...), это решение использует не информацию из события, а сам слайдер. Надеюсь, это поможет.

...