1

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>

3
  • Bueno @Mike, quizás esto no solucione del todo lo que intentas arreglar, pero, usas algún framework?? Commented el 30 may. 2016 a las 2:23
  • Mike, creo que has puesto dos veces el mismo texto de la pregunta con el mismo código. ¿Podrías arreglarlo para que se vea bien? Commented el 30 may. 2016 a las 13:27
  • Hola ChemaCortes, gracias por avisarme. Ya corregi el detalle y Pedro Miguel Pimienta Morales, si lo se seria mas facil pero no es mi intencion, lo que quiero es hacerlo en javascript puro, asi no dependo de los frameworks. Porfavor si tienen alguna idea o algun amigo que pueda contribuir les agradeceria mucho. Saludos.
    – Mike
    Commented el 6 jun. 2016 a las 3:13

1 respuesta 1

1

Puedes usar lory es un slider minimalista que es solo javascript. Te ofrece varias características interesantes con diferentes eventos. Espero te sirva. Tendrás un código más limpio que lo que tienes ahora. Y si te sirve lo podrás usar siempre. (http://meandmax.github.io/lory/) - No es una solución a tu código pero si lo usas te puede servir en todos tus proyectos.

3
  • Hola probare tu recomendación luego comento a ver como me fue. Gracias.
    – Mike
    Commented el 20 jun. 2016 a las 4:05
  • Ya nos comentas Commented el 23 jun. 2016 a las 18:56
  • @Mike probaste la recomendación? Te ha funcionado?
    – fredyfx
    Commented el 2 nov. 2016 a las 17:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.