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

MMX3000
На сайте с 23.07.2007
Offline
155
110

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

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

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

dreamlandia.net (http://dreamlandia.net) - здесь сбываются мечты!
J
На сайте с 10.10.2017
Offline
32
#1

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

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

Программы на заказ - https://upread.ru/
T
На сайте с 01.07.2010
Offline
92
#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>
MMX3000
На сайте с 23.07.2007
Offline
155
#3
JJizn #:

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

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

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

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