Как сделать переключение страниц на телефоне при помощи SWIPE?

Question

[Николай Добрынин]

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

document.addEventListener('touchstart', handleTouchStart, false);        
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;                                                        
var yDown = null;

function getTouches(evt) {
  return evt.touches ||             // browser API
         evt.originalEvent.touches; // jQuery
}                                                     

function handleTouchStart(evt) {
    const firstTouch = getTouches(evt)[0];                                      
    xDown = firstTouch.clientX;                                      
    yDown = firstTouch.clientY;                                      
};                                                

function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    }

    var xUp = evt.touches[0].clientX;                                    
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 ) {
            /* left swipe */ 
        } else {
            /* right swipe */
        }                       
    } else {
        if ( yDiff > 0 ) {
            /* up swipe */ 
        } else { 
            /* down swipe */
        }                                                                 
    }
    /* reset values */
    xDown = null;
    yDown = null;                                             
};

как заставить его листать страницы?

Comments

[Alex]

И если вы копируете код, то хотя бы смотрите как он работает.

Answer 1

[Alex]

Замените

/* left swipe */ 
/* right swipe */
/* up swipe */ 
/* down swipe */

на то, что должно выполнится при определённом свайпе.

Но, по моему это очень плохая идея, так как на многих устройствах эти жесты заняты системой.

Comments

[Николай Добрынин]

это я понимаю, но жена хочет дорага багато как у Zara(это сайт со шмотками). спасибо за пояснение.