javascript - eventos - Control deslizante de deslizamiento horizontal con jQuery y compatibilidad con dispositivos táctiles?
touchmove javascript (15)
Necesito hacer que un deslizador de producto como este (vea el área roja) deslice el control deslizante con ímpetu.
Debería funcionar en el escritorio, el iPad y el navegador móvil. ¿Conoces algún complemento móvil jquery / jquery para lograr esto?
El efecto que quiero es casi similar a este http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html (pero no es compatible con el toque)
y exactamente como la sección "Top 25" en la aplicación para iPad de Apple llamada "Trailers"
¿Has probado iosSlider? Puede hacer exactamente lo que necesita.
¿Has visto FlexSlider de WooThemes? Lo he usado en varios proyectos recientes con gran éxito. También está habilitado para el tacto, por lo que funcionará tanto en navegadores basados en mouse como en navegadores táctiles en iOS y Android.
Con mi experiencia, la mejor opción de código abierto será UIKIT con su componente deslizante uikit . y es muy fácil de implementar, por ejemplo, en tu caso podrías hacer algo como esto.
<div data-uk-slider>
<div class="uk-slider-container">
<ul class="uk-slider uk-grid-width-medium-1-4"> // width of the elements
<li>...</li> //slide elements
...
</ul>
</div>
Eche un vistazo a iScroll v4 aquí: http://cubiq.org/iscroll-4
Puede que no sea jQuery, pero funciona bastante bien en Desktop Mobile y iPad; Lo he usado en muchos proyectos y lo he combinado con jQuery.
¡Buena suerte!
Eche un vistazo a la vista de desplazamiento jQuery (demostración here ). Here está el repositorio git hub para ese proyecto experimental. Mire su html para ver qué archivos deben incluirse y qué atributos agregar a los elementos que desea que sean desplazables.
Lo he usado para poder desplazar elementos div horizontalmente en dispositivos táctiles.
En mi opinión, iosSlider es increíble. Funciona en casi cualquier dispositivo y está bien documentado. Es gratis para uso personal, pero para licencias de sitios comerciales cuesta $ 20.
También una gran opción es touchCarousel o RoyalSlider del mismo autor. Estos dos tienen todo lo que necesitas, pero también no son gratis y tienen un precio de $ 10-12
Encontré esto, espero que ayude http://www.zackgrossbart.com/hackito/touchslider/
Es posible que le interesen los siguientes:
Me doy cuenta de que esto no es una solución de jQuery, pero el marco Sencha Touch es bastante bueno para construir su IU de destino. Ejemplo (haga clic en el enlace de la barra lateral del carrusel ): http://dev.sencha.com/deploy/touch/examples/kitchensink/
Este podría adaptarse a su necesidad:
http://caroufredsel.frebsite.nl/
Agrega jquery Touchwipe para soporte táctil
Luego, en la configuración, agregue
scroll : {
wipe: true
}
Esto se ve de manera similar y usa jQuery mobile http://www.irinavelychko.com/tutorials/jquery-mobile-gallery
Y, la demostración de la misma http://demo.irinavelychko.com/tuts/jqm-dialog-gallery.html
Finalizar el plugin jQuery de Portfoliojs: http://portfoliojs.com
Este complemento es compatible con dispositivos táctiles, computadoras de escritorio y navegadores móviles. Además, tiene la característica de precarga.
He encontrado otro: http://swipejs.com/
parece funcionar bien, pero encuentro un problema cuando se combina con el arranque de la versión OS X de Chrome. Si la compatibilidad total entre navegadores no es un problema, entonces estás satisfecho.
He hecho una especie de esto para uno de mis sitios web en desarrollo.
He utilizado StepCarousel para el caroussel porque es el único que he encontrado que puede aceptar diferentes tamaños de imagen en el mismo carrusel.
Además de esto para agregar el efecto de toque táctil, he usado el plugin jquery.touchswipe ;
Y stepcarousel mover panel derecho o izquierda con una función para que pueda hacer:
$("#slider-actu").touchwipe({
wipeLeft: function() {stepcarousel.stepBy(''slider-actu'', 3);},
wipeRight: function() {stepcarousel.stepBy(''slider-actu'', -3);},
min_move_x: 20
});
Puede ver el renderizado real en esta página
Espero que te ayuden
Si yo fuera tú, implementaría mi propia solución en función de las especificaciones del evento. Básicamente, lo que es deslizar - es el manejo de tocar hacia abajo, tocar movimiento, retocar eventos. aquí hay un extracto de mi propia lib para manejar eventos táctiles de iPhone:
touch_object.prototype.handle_touchstart = function(e){
if (e.targetTouches.length != 1){
return false;
}
this.obj.style.zIndex = 100;
e.preventDefault();
this.startX = e.targetTouches[0].pageX - this.geometry.x;
this.startY = e.targetTouches[0].pageY - this.geometry.y;
/* adjust for left /top */
this.bind_handler(''touchmove'');
this.bind_handler(''touchend'');
}
touch_object.prototype.handle_touchmove = function(e) {
e.preventDefault();
if (e.targetTouches.length != 1){
return false;
}
var x=e.targetTouches[0].pageX - this.startX;
var y=e.targetTouches[0].pageY - this.startY;
this.move(x,y);
}
touch_object.prototype.handle_touchend = function(e){
this.obj.style.zIndex = 10;
this.unbind_handler(''touchmove'');
this.unbind_handler(''touchend'');
}
Usé ese código para "mover cosas". Pero, en lugar de moverse, puede crear su propio algoritmo para, por ejemplo, activar la redirección a otra ubicación, o puede usar ese movimiento para "mover / deslizar" el elemento, en el que se desliza, a otra ubicación.
Entonces, realmente ayuda entender los conceptos básicos de cómo funcionan las cosas y luego crear soluciones más complicadas. esto también podría ayudar.
Lo usé para crear mi solución:
También recomendaría http://cubiq.org/iscroll-4
PERO si no estás investigando, prueba este plugin
http://www.zackgrossbart.com/hackito/touchslider/
funciona muy bien y se predetermina a una barra deslizante horizontal en el escritorio; no es tan elegante en el escritorio como lo es iscroll-4, pero funciona muy bien en dispositivos táctiles
¡BUENA SUERTE!