10

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>

4
  • 1
    ¿Podrías incluir el HTML relacionado también? Sería interesante ver el efecto/error y eso ayudaría a resolver el problema
    – Alvaro Montoro
    Commented el 26 may. 2016 a las 3:46
  • Gracias por responder con brevedad. Arriba acabo de añadir el codigo HTML y CSS para ilustrar mejor mi consulta.
    – Mike
    Commented el 26 may. 2016 a las 6:07
  • @Mike ya viste la respuesta que te han ofrecido: es.stackoverflow.com/a/11133/822 ?
    – fredyfx
    Commented el 2 nov. 2016 a las 17:16
  • @acR ¿Podrías mencionar en qué es lo que te interesaría que se le preste más atención?
    – Mariano
    Commented el 10 ene. 2017 a las 4:47

1 respuesta 1

5
+300

Te marco la idea porque no recuerdo muy bien la sintaxis de Javascript.

Lo que yo he hecho en una aplicación es:

  1. Tomar el ancho de la pantalla y guardarlo en alguna variable. (ancho)
  2. Detectar el toque inicial. (x1)
  3. Detectar el toque final. (x2)
  4. Sacar la diferencia. (dif = x2- x1)
  5. Convertir la diferencia a un proporcional del ancho. (prop = (dif * ancho) / 100)
  6. Hacer la comparación de si es adelante o atrás al detectar el final del toque.

Edit Quité el pseudocódigo e hice una pequeña investigación y te dejo el código en javascript que iría en lugar del listener que tienes para touchmove:

var ancho = slider400.offsetWidth;
var x1;
var x2;

slider400.addEventListener('touchstart',function(e){
    var touchobj = e.changedTouches[0];
    x1 = parseInt(touchobj.clientX);
    e.preventDefault();
    clearInterval(temporizador);
});
slider400.addEventListener('touchend',function(e){
    var touchobj = e.changedTouches[0];
    x2 = parseInt(touchobj.clientX);

    var dif = x2 - x1;
    var prop = (ancho * dif) / 100;

    if (prop > 20) {
        avanzar();
    } else if (prop < -20) {
        retroceder();
    }

    e.preventDefault();
    clearInterval(temporizador);
});
1
  • @fredyfx Estoy leyendo todas y los enlaces dados en las respuestas justo en este momento amigo. Gracias por el recordatorio
    – Mike
    Commented el 12 nov. 2016 a las 14:10

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.