• Никакой политики на форуме. Иначе - бан!
  • Вопрос без рабочей ссылки на проблему считается риторическим. Без ссылки и скриншота - провокацией!
  • Темы озаглавленные с маленькой буквы или капсом удаляются без предупреждения!

previous post link \ next post link - свайп на мобильной версии

DiZeR

Опытный
Местный
Существует множество плагинов с функцией - следующий \ предыдущий (или товар в Woo) с реализацией в виде клика ссылок.
Есть ли решение которое выводит подобный функционал только на мобильной версии сайта, желательно в виде свайпа пальца >>> право | <<< лево ?

Вроде того - https://premium.wpmudev.org/blog/easily-add-touch-gestures-to-your-wordpress-site/
 
Последнее редактирование:

DiZeR

Опытный
Местный
Как обычно - сам спросил, сам ответил ..
1) вообщем нашлось старое как ... мамонта рабочее решение в виде бесплатного плагина (прикреплю) Но с ним есть проблемы несовместимости.
2) Еще есть вот такой вот JS код:
JavaScript:
// Вешаем на прикосновение функцию handleTouchStart
document.addEventListener('touchstart', handleTouchStart, false);
// А на движение пальцем по экрану - handleTouchMove   
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;                                                     
var yDown = null;                                                     

function handleTouchStart(evt) {                                       
    xDown = evt.touches[0].clientX;                                   
    yDown = evt.touches[0].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;                                           
};
 

Вложения

  • WP_Swipe_Navigation.zip
    3.4 KB · Просмотры: 0
Последнее редактирование:
Сверху Снизу