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).
É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.
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>