eventos javascript jquery jquery-plugins css3

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.

iosSlider


¿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






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:

http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html