tengo un slider diseñado para responder a pantallas táctiles y me gustaría que al posar y mover el dedo sobre la pantalla el slider siga el movimiento del dedo y luego corra un slide hacia la direccion que el usuario dirija. Para ello utilize el siguiente código y todo en JavaScript puro pero por alguna razon al mantener presionado el dedo por mucho tiempo y comenzar a avanzar los cambios en la posicion del slider se desborda y empieza a correr tanto que los slides corren demasiado y ya no se ve mas que espacio vacio. Aqui el codigo y espero se pueda entender. Alguna idea?
// JavaScript Document
document.addEventListener('DOMContentLoaded', function (){
var slider400 = document.querySelector('.slider-1'),
flecha_right = document.querySelector('.right'),
startx = 0,
dist = 0,
flecha_left = document.querySelector('.left'),
temporitzador = "";
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.parentNode.removeChild(last_slide);
slider400.style.left = -100 + "%";
temporizador = setInterval(avanzar,9000);
}
function avanzar(){
var slider_margen = parseInt(slider400.style.left);
if(-200 < slider_margen){
slider400.style.left = slider_margen - 4 + "%";
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.parentNode.removeChild(first_slide);
slider400.style.left = -100 + '%';
};
function retroceder(){
var slider_margen = parseInt(slider400.style.left);
if(0 > slider_margen){
slider400.style.left = 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.parentNode.removeChild(last_slide);
slider400.style.left = -100 + '%';
};
flecha_left.addEventListener('click',function(){
clearInterval(temporizador);
retroceder();
});
flecha_right.addEventListener('click',function(){
clearInterval(temporizador);
avanzar();
});
slider400.addEventListener('touchstart',function(e){
var touchobj = e.changedTouches[0];
startx = parseInt(touchobj.clientX);
e.preventDefault();
//alert(startx);
});
slider400.addEventListener('touchmove',function(e){
var touchobj = e.changedTouches[0];
var slider_margen = parseInt(slider400.style.left);
dist = parseInt(touchobj.clientX) - startx;
if(0 > dist){
slider400.style.left = slider_margen + (dist/25) + "%";
};
if(0 < dist){
slider400.style.left = slider_margen + (dist/25) + "%";
};
clearInterval(temporizador);
e.preventDefault();
});
slider400.addEventListener('touchend',function(e){
var touchobj = e.changedTouches[0];
//alert(dist);
if(20 < dist){
retroceder();
}else if(-20 > dist){
avanzar();
}else{
}
clearInterval(temporizador);
e.preventDefault();
});
init();
});
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);
}
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>