Skip to main content
1 de 5
Mike
  • 151
  • 1
  • 6

Como hacer un slider con el evento de toque 'touchmove' con Javascript puro?

Vengo planeando hacer un slider para mi web pero lo que quiero es que desde un smartphone con un deslizamiento de dedo el slider corra de un slide hacia el siguiente y todo eso con javascript puro (sin plugins ni siquiera Jquery).

Este es el codigo javascript que uso para generar el movimiento automático del slider y también el deslizamiento de los slides con un clic del mouse.

Luego de ver que trabaja bien intente añadirle el evento 'touchmove' pero al parecer contabiliza cada pixel como un deslizamiento total de un slide asi que si hago una pasada larga pues da muchas corridas.

Alguna idea porque me pareces que estoy bastante cerca. Gracias¡

document.addEventListener('DOMContentLoaded', function (){
    var slider400 = document.querySelector('.slider-1'),
    flecha_right = document.querySelector('.right'),
    startx = 0;
    flecha_left = document.querySelector('.left');
    function init(){
        var last_slide = slider400.querySelector('.slide-div:last-child'),
        first_slide = slider400.querySelector('.slide-div:first-child');
        slider400.insertBefore(last_slide.cloneNode(true), first_slide);
        last_slide.remove();
        slider400.style.marginLeft = -100 + "%";
    }
    function avanzar(){
        var slider_margen = parseInt(slider400.style.marginLeft);
        if(-200 < slider_margen){
            slider400.style.marginLeft = slider_margen - 2 + "%";
            setTimeout(function(){
                avanzar();
            },0.1);
        }else{
            mover_slide();          
        };
    };
    function mover_slide(){
        var last_slide = slider400.querySelector('.slide-div:last-child'),
        first_slide = slider400.querySelector('.slide-div:first-child');
        slider400.appendChild(first_slide.cloneNode(true), last_slide);
        first_slide.remove();
        slider400.style.marginLeft = -100 + '%';
    };
    function retroceder(){
        var slider_margen = parseInt(slider400.style.marginLeft);
        if(0 > slider_margen){
            slider400.style.marginLeft = slider_margen + 2 + "%";
            setTimeout(function(){
                retroceder();
            },0.1);
        }else{
            mover_slide_2();
        };
    };
    function mover_slide_2(){
        var last_slide = slider400.querySelector('.slide-div:last-child'),
        first_slide = slider400.querySelector('.slide-div:first-child');
        slider400.insertBefore(last_slide.cloneNode(true), first_slide);
        last_slide.remove();
        slider400.style.marginLeft = -100 + '%';
    };
    flecha_left.addEventListener('click',function(){
        clearInterval(temporizador);
        retroceder();
    });
    flecha_right.addEventListener('click',function(){
        clearInterval(temporizador);
        avanzar();
    });
    slider400.addEventListener('touchmove',function(e){
        var touchobj = e.changedTouches[0];
        var dist = parseInt(touchobj.clientX) - startx;
        if(0 < dist){
            avanzar();
        }else if(0 > dist){
            retroceder();
        }
        e.preventDefault();
        clearInterval(temporizador);
    });
    init();
    var temporizador = setInterval(avanzar,9000);
});

Mike
  • 151
  • 1
  • 6