Свайп картинок на мобильном

Сергей
На сайте с 23.07.2007
Offline
155
148

Приветствую, Коллеги!

Встала задача сделать свайп 5-ти картинок на мобильной версии, типа слайдер. Раньше сам делал слайдер, но там по клику методом jquery:animate {left:-100%;} .. и т.д. а пальцем не двигается. jQuery кода строк 20-30

Весь поиск перерыл, предлагаются какие-то сумасшедшие плагины по 10 файлов и столько же папок, так в них еще разобраться надо.. неужели нет более простого решения типа: html, css, script и все в одной странице кода строк на 100. Делов-то картинка влево-вправо

J
На сайте с 10.10.2017
Offline
48
#1

 Раньше сам делал слайдер, но там по клику методом jquery:animate {left:-100%;} .. и т.д. а пальцем не двигается. jQuery кода строк 20-30

Повешайте перелистывание не только на событие клика, но и на событие свайпа (touchstart, touchmove ).

Программы на заказ https://upread.ru/
T
На сайте с 01.07.2010
Offline
113
#2
<script>

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

var xDown = null;                                                        
var yDown = null;                                                        

var swipe_id = 1;                                                        

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;
        
        var swipe_yes = 0;
        
        var el=document.getElementById('img_'+swipe_id);
        if(el.style.display=="block"){swipe_yes = 1;};


    if ( (Math.abs( xDiff ) > Math.abs( yDiff )) && swipe_yes != 0  ) {/*most significant*/
        if ( xDiff > 0 ) {
                  open_img_next(Number(swipe_id)); /* left swipe */
        } else {
          open_img_prev(Number(swipe_id)); /* left swipe */    
        }                      
    }
    /* reset values */
    xDown = null;
    yDown = null;                                            
};
</script>
Создание сайтов. Офис в Москве. Долго и дорого.
Сергей
На сайте с 23.07.2007
Offline
155
#3
JJizn #:

Повешайте перелистывание не только на событие клика, но и на событие свайпа (touchstart, touchmove ).

Не думаю, что получится. Там смена слайда происходит по клику на стрелку либо внизу кружочки.а свайп именно по всему слайду.

tippula спасибо, буду смотреть

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий