Skip to main content
Aviso eliminado Atraer atención por hubman
Recompensa finalizada con AmigoTaco's answer elegida por hubman
se añadieron 2 caracteres en el cuerpo
Origen Enlace
Jorgesys
  • 111.1k
  • 14
  • 55
  • 134

Éste es el código JavaScript que uso para generar el movimiento automático del slider y también el deslizamiento de los slidesslider con un clic del ratón.

Luego de ver que trabaja bien intenté añadirle el evento touchmove pero al parecer contabiliza cada pixel como un deslizamiento total de un slide asislider, así que si hago una pasada larga pues da muchas corridas.

Éste es el código JavaScript que uso para generar el movimiento automático del slider y también el deslizamiento de los slides con un clic del ratón.

Luego de ver que trabaja bien intenté 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.

Éste es el código JavaScript que uso para generar el movimiento automático del slider y también el deslizamiento de los slider con un clic del ratón.

Luego de ver que trabaja bien intenté añadirle el evento touchmove pero al parecer contabiliza cada pixel como un deslizamiento total de un slider, así que si hago una pasada larga pues da muchas corridas.

Aviso añadido Atraer atención por hubman
Recompensa iniciada por un valor de 200 de reputación por hubman
Aviso eliminado Atraer atención por Alvaro Montoro
Recompensa finalizada con AmigoTaco's answer elegida por Alvaro Montoro
Aviso añadido Atraer atención por Alvaro Montoro
Recompensa iniciada por un valor de 100 de reputación por Alvaro Montoro
formato de código + ortografía
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Como ¿Cómo hacer un slider con el evento de toque 'touchmove' con Javascript puro?

EsteÉste es el codigo javascriptcódigo JavaScript que uso para generar el movimiento automático del slider y también el deslizamiento de los slides con un clic del mouseratón.

Luego de ver que trabaja bien intenteintenté añadirle el evento 'touchmove'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 parecesparece 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);
});
section{
    background:#fff;
    overflow:hidden;
    margin-left:;
}
main section .slider-1{
    width:300%;
    position:relative;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor:-ms-grab;
    cursor:grab;
    box-sizing:content-box;
    display:-moz-flex;
    display:-webkit-flex;
    display:-ms-flex;
    display:flex;
    margin-left:-100%;
}
main section .slider-1:active{
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor:-ms-grabbing;
    cursor:grabbing;
}
main section .slider-1 p{
    color:#900;
    padding-top:1em;
    font-family:'UbuntuCondensed-Regular';
    text-align:center;
}
main section .slider-1 h1{
    font-family:'Montserrat-Bold';
    text-align:center;
    width:95%;
    margin:0 auto;
    padding-bottom:1em;
}
main section .slider-1 .slide-div img{
    width:95%;
    text-align:center;
}
main section .slide-div{
    /*padding:0.5em 0.5em;*/
    width:33.3333%;
    position:relative;
    display:inline-block;
    box-sizing:border-box;
    padding:0;
    text-align:center;
    vertical-align:top;
    margin:0;
}
/*main section .slide-div:first-child{
    margin-left:0 !important;
}
main section .slide-div:last-child{
    margin-right:0 !important;
}*/
main section .slide-div .borde{
    margin:0.5em 0.5em;
    border:1px solid #c0c0c0;
    border-radius:8px;
    padding:0.5em 0.5em;
    box-sizing:border-box;
}
main section .flecha{
    position:absolute;
    top:60%;
    cursor:pointer;
    z-index:8;
    transform:translateY(20%);
}
main section .right{
    right:0;
}
main section .left{
    left:0;
}
main section .flecha li{
    display:table-cell;
    height:4em;
    width:2em;
    vertical-align:middle;
    text-align:center;
    background:rgba(0,0,0,.3);
    color:rgba(255,255,255,.8);
}
main section .flecha:active li{
    background:rgba(0,0,0,.5);
    color:rgba(255,255,255,1);
}
<main>
            <section>
                <a class="flecha right"><li class="fa fa-arrow-right"></li></a>
                <a class="flecha left"><li class="fa fa-arrow-left"></li></a>
                <div class="slider-1">
                    <div class="slide-div slide1">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-1.png" alt="" title="">
                        </div>
                    </div>
                    <div class="slide-div slide2">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-2.png" alt="" title="">
                        </div>
                    </div>
                    <div class="slide-div slide3">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-3.png" alt="" title="">
                        </div>
                    </div>
                </div>
            </section>
</main>

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

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);
});
section{
    background:#fff;
    overflow:hidden;
    margin-left:;
}
main section .slider-1{
    width:300%;
    position:relative;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor:-ms-grab;
    cursor:grab;
    box-sizing:content-box;
    display:-moz-flex;
    display:-webkit-flex;
    display:-ms-flex;
    display:flex;
    margin-left:-100%;
}
main section .slider-1:active{
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor:-ms-grabbing;
    cursor:grabbing;
}
main section .slider-1 p{
    color:#900;
    padding-top:1em;
    font-family:'UbuntuCondensed-Regular';
    text-align:center;
}
main section .slider-1 h1{
    font-family:'Montserrat-Bold';
    text-align:center;
    width:95%;
    margin:0 auto;
    padding-bottom:1em;
}
main section .slider-1 .slide-div img{
    width:95%;
    text-align:center;
}
main section .slide-div{
    /*padding:0.5em 0.5em;*/
    width:33.3333%;
    position:relative;
    display:inline-block;
    box-sizing:border-box;
    padding:0;
    text-align:center;
    vertical-align:top;
    margin:0;
}
/*main section .slide-div:first-child{
    margin-left:0 !important;
}
main section .slide-div:last-child{
    margin-right:0 !important;
}*/
main section .slide-div .borde{
    margin:0.5em 0.5em;
    border:1px solid #c0c0c0;
    border-radius:8px;
    padding:0.5em 0.5em;
    box-sizing:border-box;
}
main section .flecha{
    position:absolute;
    top:60%;
    cursor:pointer;
    z-index:8;
    transform:translateY(20%);
}
main section .right{
    right:0;
}
main section .left{
    left:0;
}
main section .flecha li{
    display:table-cell;
    height:4em;
    width:2em;
    vertical-align:middle;
    text-align:center;
    background:rgba(0,0,0,.3);
    color:rgba(255,255,255,.8);
}
main section .flecha:active li{
    background:rgba(0,0,0,.5);
    color:rgba(255,255,255,1);
}
<main>
            <section>
                <a class="flecha right"><li class="fa fa-arrow-right"></li></a>
                <a class="flecha left"><li class="fa fa-arrow-left"></li></a>
                <div class="slider-1">
                    <div class="slide-div slide1">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-1.png" alt="" title="">
                        </div>
                    </div>
                    <div class="slide-div slide2">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-2.png" alt="" title="">
                        </div>
                    </div>
                    <div class="slide-div slide3">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-3.png" alt="" title="">
                        </div>
                    </div>
                </div>
            </section>
</main>

¿Cómo hacer un slider con el evento de toque 'touchmove' con Javascript puro?

Éste es el código JavaScript que uso para generar el movimiento automático del slider y también el deslizamiento de los slides con un clic del ratón.

Luego de ver que trabaja bien intenté 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 parece que estoy bastante cerca.

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);
});
section{
  background:#fff;
  overflow:hidden;
  margin-left:;
}
main section .slider-1{
  width:300%;
  position:relative;
  cursor:-webkit-grab;
  cursor:-moz-grab;
  cursor:-ms-grab;
  cursor:grab;
  box-sizing:content-box;
  display:-moz-flex;
  display:-webkit-flex;
  display:-ms-flex;
  display:flex;
  margin-left:-100%;
}
main section .slider-1:active{
  cursor:-webkit-grabbing;
  cursor:-moz-grabbing;
  cursor:-ms-grabbing;
  cursor:grabbing;
}
main section .slider-1 p{
  color:#900;
  padding-top:1em;
  font-family:'UbuntuCondensed-Regular';
  text-align:center;
}
main section .slider-1 h1{
  font-family:'Montserrat-Bold';
  text-align:center;
  width:95%;
  margin:0 auto;
  padding-bottom:1em;
}
main section .slider-1 .slide-div img{
  width:95%;
  text-align:center;
}
main section .slide-div{
  /*padding:0.5em 0.5em;*/
  width:33.3333%;
  position:relative;
  display:inline-block;
  box-sizing:border-box;
  padding:0;
  text-align:center;
  vertical-align:top;
  margin:0;
}
/*main section .slide-div:first-child{
margin-left:0 !important;
}
main section .slide-div:last-child{
margin-right:0 !important;
}*/
main section .slide-div .borde{
  margin:0.5em 0.5em;
  border:1px solid #c0c0c0;
  border-radius:8px;
  padding:0.5em 0.5em;
  box-sizing:border-box;
}
main section .flecha{
  position:absolute;
  top:60%;
  cursor:pointer;
  z-index:8;
  transform:translateY(20%);
}
main section .right{
  right:0;
}
main section .left{
  left:0;
}
main section .flecha li{
  display:table-cell;
  height:4em;
  width:2em;
  vertical-align:middle;
  text-align:center;
  background:rgba(0,0,0,.3);
  color:rgba(255,255,255,.8);
}
main section .flecha:active li{
  background:rgba(0,0,0,.5);
  color:rgba(255,255,255,1);
}
<main>
  <section>
    <a class="flecha right"><li class="fa fa-arrow-right"></li></a>
    <a class="flecha left"><li class="fa fa-arrow-left"></li></a>
    <div class="slider-1">
      <div class="slide-div slide1">
        <div class="borde">
          <p>Es un hecho:</p>
          <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
          <img src="img/slides1/slide1-1.png" alt="" title="">
        </div>
      </div>
      <div class="slide-div slide2">
        <div class="borde">
          <p>Es un hecho:</p>
          <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
          <img src="img/slides1/slide1-2.png" alt="" title="">
        </div>
      </div>
      <div class="slide-div slide3">
        <div class="borde">
          <p>Es un hecho:</p>
          <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
          <img src="img/slides1/slide1-3.png" alt="" title="">
        </div>
      </div>
    </div>
  </section>
</main>
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
se eliminaron 2628 caracteres en el cuerpo
Origen Enlace
Mike
  • 151
  • 1
  • 6

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);
});
section{
    background:#fff;
    overflow:hidden;
    margin-left:;
}
main section .slider-1{
    width:300%;
    position:relative;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor:-ms-grab;
    cursor:grab;
    box-sizing:content-box;
    display:-moz-flex;
    display:-webkit-flex;
    display:-ms-flex;
    display:flex;
    margin-left:-100%;
}
main section .slider-1:active{
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor:-ms-grabbing;
    cursor:grabbing;
}
main section .slider-1 p{
    color:#900;
    padding-top:1em;
    font-family:'UbuntuCondensed-Regular';
    text-align:center;
}
main section .slider-1 h1{
    font-family:'Montserrat-Bold';
    text-align:center;
    width:95%;
    margin:0 auto;
    padding-bottom:1em;
}
main section .slider-1 .slide-div img{
    width:95%;
    text-align:center;
}
main section .slide-div{
    /*padding:0.5em 0.5em;*/
    width:33.3333%;
    position:relative;
    display:inline-block;
    box-sizing:border-box;
    padding:0;
    text-align:center;
    vertical-align:top;
    margin:0;
}
/*main section .slide-div:first-child{
    margin-left:0 !important;
}
main section .slide-div:last-child{
    margin-right:0 !important;
}*/
main section .slide-div .borde{
    margin:0.5em 0.5em;
    border:1px solid #c0c0c0;
    border-radius:8px;
    padding:0.5em 0.5em;
    box-sizing:border-box;
}
main section .flecha{
    position:absolute;
    top:60%;
    cursor:pointer;
    z-index:8;
    transform:translateY(20%);
}
main section .right{
    right:0;
}
main section .left{
    left:0;
}
main section .flecha li{
    display:table-cell;
    height:4em;
    width:2em;
    vertical-align:middle;
    text-align:center;
    background:rgba(0,0,0,.3);
    color:rgba(255,255,255,.8);
}
main section .flecha:active li{
    background:rgba(0,0,0,.5);
    color:rgba(255,255,255,1);
}
<main>
            <section>
                <a class="flecha right"><li class="fa fa-arrow-right"></li></a>
                <a class="flecha left"><li class="fa fa-arrow-left"></li></a>
                <div class="slider-1">
                    <div class="slide-div slide1">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-1.png" alt="" title="">
                        </div>
                    </div>
                    <div class="slide-div slide2">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-2.png" alt="" title="">
                        </div>
                    </div>
                    <div class="slide-div slide3">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-3.png" alt="" title="">
                        </div>
                    </div>
                </div>
            </section>
</main>

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);
});
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);
});
section{
    background:#fff;
    overflow:hidden;
    margin-left:;
}
main section .slider-1{
    width:300%;
    position:relative;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor:-ms-grab;
    cursor:grab;
    box-sizing:content-box;
    display:-moz-flex;
    display:-webkit-flex;
    display:-ms-flex;
    display:flex;
    margin-left:-100%;
}
main section .slider-1:active{
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor:-ms-grabbing;
    cursor:grabbing;
}
main section .slider-1 p{
    color:#900;
    padding-top:1em;
    font-family:'UbuntuCondensed-Regular';
    text-align:center;
}
main section .slider-1 h1{
    font-family:'Montserrat-Bold';
    text-align:center;
    width:95%;
    margin:0 auto;
    padding-bottom:1em;
}
main section .slider-1 .slide-div img{
    width:95%;
    text-align:center;
}
main section .slide-div{
    /*padding:0.5em 0.5em;*/
    width:33.3333%;
    position:relative;
    display:inline-block;
    box-sizing:border-box;
    padding:0;
    text-align:center;
    vertical-align:top;
    margin:0;
}
/*main section .slide-div:first-child{
    margin-left:0 !important;
}
main section .slide-div:last-child{
    margin-right:0 !important;
}*/
main section .slide-div .borde{
    margin:0.5em 0.5em;
    border:1px solid #c0c0c0;
    border-radius:8px;
    padding:0.5em 0.5em;
    box-sizing:border-box;
}
main section .flecha{
    position:absolute;
    top:60%;
    cursor:pointer;
    z-index:8;
    transform:translateY(20%);
}
main section .right{
    right:0;
}
main section .left{
    left:0;
}
main section .flecha li{
    display:table-cell;
    height:4em;
    width:2em;
    vertical-align:middle;
    text-align:center;
    background:rgba(0,0,0,.3);
    color:rgba(255,255,255,.8);
}
main section .flecha:active li{
    background:rgba(0,0,0,.5);
    color:rgba(255,255,255,1);
}
<main>
            <section>
                <a class="flecha right"><li class="fa fa-arrow-right"></li></a>
                <a class="flecha left"><li class="fa fa-arrow-left"></li></a>
                <div class="slider-1">
                    <div class="slide-div slide1">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-1.png" alt="" title="">
                        </div>
                    </div>
                    <div class="slide-div slide2">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-2.png" alt="" title="">
                        </div>
                    </div>
                    <div class="slide-div slide3">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-3.png" alt="" title="">
                        </div>
                    </div>
                </div>
            </section>
</main>

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);
});

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);
});
section{
    background:#fff;
    overflow:hidden;
    margin-left:;
}
main section .slider-1{
    width:300%;
    position:relative;
    cursor:-webkit-grab;
    cursor:-moz-grab;
    cursor:-ms-grab;
    cursor:grab;
    box-sizing:content-box;
    display:-moz-flex;
    display:-webkit-flex;
    display:-ms-flex;
    display:flex;
    margin-left:-100%;
}
main section .slider-1:active{
    cursor:-webkit-grabbing;
    cursor:-moz-grabbing;
    cursor:-ms-grabbing;
    cursor:grabbing;
}
main section .slider-1 p{
    color:#900;
    padding-top:1em;
    font-family:'UbuntuCondensed-Regular';
    text-align:center;
}
main section .slider-1 h1{
    font-family:'Montserrat-Bold';
    text-align:center;
    width:95%;
    margin:0 auto;
    padding-bottom:1em;
}
main section .slider-1 .slide-div img{
    width:95%;
    text-align:center;
}
main section .slide-div{
    /*padding:0.5em 0.5em;*/
    width:33.3333%;
    position:relative;
    display:inline-block;
    box-sizing:border-box;
    padding:0;
    text-align:center;
    vertical-align:top;
    margin:0;
}
/*main section .slide-div:first-child{
    margin-left:0 !important;
}
main section .slide-div:last-child{
    margin-right:0 !important;
}*/
main section .slide-div .borde{
    margin:0.5em 0.5em;
    border:1px solid #c0c0c0;
    border-radius:8px;
    padding:0.5em 0.5em;
    box-sizing:border-box;
}
main section .flecha{
    position:absolute;
    top:60%;
    cursor:pointer;
    z-index:8;
    transform:translateY(20%);
}
main section .right{
    right:0;
}
main section .left{
    left:0;
}
main section .flecha li{
    display:table-cell;
    height:4em;
    width:2em;
    vertical-align:middle;
    text-align:center;
    background:rgba(0,0,0,.3);
    color:rgba(255,255,255,.8);
}
main section .flecha:active li{
    background:rgba(0,0,0,.5);
    color:rgba(255,255,255,1);
}
<main>
            <section>
                <a class="flecha right"><li class="fa fa-arrow-right"></li></a>
                <a class="flecha left"><li class="fa fa-arrow-left"></li></a>
                <div class="slider-1">
                    <div class="slide-div slide1">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-1.png" alt="" title="">
                        </div>
                    </div>
                    <div class="slide-div slide2">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-2.png" alt="" title="">
                        </div>
                    </div>
                    <div class="slide-div slide3">
                        <div class="borde">
                            <p>Es un hecho:</p>
                            <h1>El 96% de usuarios rechazan una página web por su apariencia.</h1>
                            <img src="img/slides1/slide1-3.png" alt="" title="">
                        </div>
                    </div>
                </div>
            </section>
</main>
se añadieron 6302 caracteres en el cuerpo
Origen Enlace
Mike
  • 151
  • 1
  • 6
Loading
Origen Enlace
Mike
  • 151
  • 1
  • 6
Loading