al arrastrar el carrusel horizontal de izquierda a derecha en el dispositivo táctil, también permite arrastrarlo hacia arriba y hacia abajo, lo que mueve toda la página. ¿Cómo puedo deshabilitar el desplazamiento vertical en el carrusel de búhos? Puedo publicar el archivo js si alguien puede ayudar
Gracias por adelantado
Impresionante css3 :)
.owl-carousel { -ms-touch-action: pan-y; touch-action: pan-y; }Esto parece funcionar para mí, al menos en iOS, no lo he probado en Android.
Cuando comienzas a deslizar con el mouse o al tocar, vi que Owl Carousel agrega la clase .owl-grab al control deslizante. Luego encontré este código de @Turnerj y simplemente puse .owl-grab en el código.
Deshabilite el desplazamiento cuando toque mover cierto elemento
También funciona con múltiples controles deslizantes en la misma página. ¡Espero que esto ayude! (Soy nuevo en jQuery, por lo que probablemente podría haber fallas en esta solución)
window.blockMenuHeaderScroll = false; $(window).on('touchstart', function(e) { if ($(e.target).closest('.owl-grab').length == 1) { blockMenuHeaderScroll = true; } }); $(window).on('touchend', function() { blockMenuHeaderScroll = false; }); $(window).on('touchmove', function(e) { if (blockMenuHeaderScroll) { e.preventDefault(); } });Use hammer.js con addEventListner para clases. He probado con iOS (iphoneX) y Android (Nexus 5X) y funciona de maravilla. ¡Espero poder ayudar!
window.blockMenuHeaderScroll = true; var mc = new Hammer(document); var classname = document.getElementsByClassName("elenco_image"); mc.on("swipeleft swiperight panleft panright", function(ev) { console.log(ev.type + " gesture detected."); window.blockMenuHeaderScroll = true; }); mc.on("swipeup swipedown panup pandown", function(ev) { console.log(ev.type + " gesture detected."); window.blockMenuHeaderScroll = false; }); for (var i = 0; i < classname.length; i++) { classname[i].addEventListener('touchmove', function(evt) { if (blockMenuHeaderScroll) { evt.preventDefault(); } }, { passive: false }); }