Usar evento touch para slider

Zerokkk #1 Mar '15

Buenas! Llevaba mucho tiempo fuerísima del desarrollo web y nunca he tocado nada para móviles, más allá de hacer las webs responsive. Y ahora que me ha surgido algo, tengo que hacer que un slider de imágenes funcione con el touch del móvil. Es decir, que al mover el dedo horizontalmente, cambie las imágenes, como si le dieras a las flechitas pero sin darles.

¿Qué formas hay para hacer esto? He probado con las librerías de JQuery mobile disparando los eventos de las flechas en la dirección del swipe (el movimiento), pero no hace nada. He pasado directamente a hacer esto, más arcaico pero al menos "funciona" (funciona mal, pero al menos responde al touch):

                          var obj = document.getElementById('main-slider');
                obj.addEventListener('touchmove', function(event) {
                     

                  
                  $("#flecha_right").click();

                 }
                }, false);

Como veréis sólo he hecho la prueba para que dispare el evento asignado a #flecha_right, y funciona algo al menos. Dicho esto, ahora tengo que saber en qué dirección hago el movimiento para asignarle el evento de #flecha_right o #flecha_left, o bien usar algún plugin que haga todo esto por mí.

¿Qué recomendaríais? Estoy muy verde en javascript, así que agradecería explicaciones largas!

Un saludo y muchas gracias!

zoeshadow #2 Mar '15

De primeras te aconsejo que uses Hammer para manejar el tema de los touch events, te será mucho más fácil.
La API es un poco rara, pero va bien:

var mc = new Hammer.Manager(ObjetoDOM);


mc.add(new Hammer.Swipe({
  direction: Hammer.DIRECTION_HORIZONTAL
}));

mc.on('swipeleft', function () {
  anteriorImagen()
});

mc.on('swiperight', function () {
  siguienteImagen()
});

En vez de llamar al evento, estaría llamando a la misma función que llamas en el evento onClick de la flecha derecha/izquierda

1 respuesta

RaymaN #3 Mar '15 Sureño

¿Por qué no usas un div con scroll horizontal?

1 respuesta

Zerokkk #4 Mar '15

#2 No me funciona xD. Bajé el plugin, lo metí (después de los de jquery), lo implementé en la parte final de scripts js tal que:

      var mc = new Hammer.Manager("#main-slider");
                    mc.add(new Hammer.Swipe({
                      direction: Hammer.DIRECTION_HORIZONTAL
                    }));

                mc.on('swipeleft', function () {
                  $("#flecha_left").click();
                });

                mc.on('swiperight', function () {
                  $("#flecha_right").click();
                });

... y no me hace nada xD. ¿Qué podría ser? Debería lanzar los eventos de las flechas...

edit: Está dentro de un $(document) de jquery.

#3 ¿Cómo sería eso y cómo lo implementaría?

2 respuestas

RaymaN #5 Mar '15 Sureño

#4 http://www.webdesignerdepot.com/2014/02/how-to-create-horizontal-scrolling-using-display-table-cell/

zoeshadow #6 Mar '15

#4 Al principio del todo estás pasando un selector de jQuery, y lo que espera es un objeto del dom.

var domObject = $('#main-slider').get(0);
var mc = new Hammer.Manager(domObject);

1 respuesta

Zerokkk #7 Mar '15

#6 Sí sí! Justo había hecho ese cambio hace un ratete y ahora funciona perfecto, va como una bala. Muchas gracias!

Tal que así:

                    var mc = new Hammer.Manager(document.getElementById("main-slider"));
                    mc.add(new Hammer.Swipe({
                      direction: Hammer.DIRECTION_HORIZONTAL
                    }));

                mc.on('swipeleft', function () {
                   
                   $("#flecha_left").click();
                 
                });

                mc.on('swiperight', function () {
                   
                 $("#flecha_right").click();
                  
                });

Usar evento touch para slider

Usuarios habituales

Tags