Estoy usando la última versión de Splide (3.6.12 a partir de hoy) a través de su CDN.
Tengo varios controles deslizantes en mi página y Splide funciona perfectamente en el escritorio. El modo de respuesta en Chrome también funciona bien, en cualquier tamaño. Sin embargo, cuando estoy cargando la misma página usando un dispositivo móvil real , ya sea que esté usando Chrome o Safari, todos los controles deslizantes están ocultos . Tengo una configuración predeterminada, sin complementos, y lo he probado en varios dispositivos.
Revisé la consola en el dispositivo móvil en Chrome y no vi ningún mensaje de advertencia o error. También he buscado estilos CSS específicos que podrían causar eso.
Si elimino el contenedor de Splide del código HTML, las imágenes vuelven a aparecer en el móvil.
Traté de reproducir el problema usando Codepen, ¡pero el siguiente ejemplo realmente funciona en dispositivos móviles !
https://codepen.io/bruno-lv-que/pen/vYWRbvz
<div class="splide"> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide"><img src="https://picsum.photos/seed/picsum/250/250" /></li> <li class="splide__slide"><img src="https://picsum.photos/seed/picsum/250/250" /></li> <li class="splide__slide"><img src="https://picsum.photos/seed/picsum/250/250" /></li> </ul> </div> </div> <div class="splide"> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide"><img src="https://picsum.photos/seed/picsum/250/250" /></li> <li class="splide__slide"><img src="https://picsum.photos/seed/picsum/250/250" /></li> <li class="splide__slide"><img src="https://picsum.photos/seed/picsum/250/250" /></li> </ul> </div> </div> <style> body { background: black; } div.splide { width: 250px; height: 250px; margin-bottom: 25px; } </style> <script> document.addEventListener('DOMContentLoaded', function() { var elms = document.getElementsByClassName('splide'); for (var i = 0; i < elms.length; i++) new Splide(elms[i]).mount(); }); </script>¿Hay algún problema específico o conocido con Splid en dispositivos móviles?
Hice una cuenta para dar una solución potencial, encontré esto mientras creaba un sitio a través de Webflow.
La solución fue asegurar que la carga diferida no estuviera habilitada para las imágenes utilizadas, el componente parece no funcionar con la carga diferida por alguna razón.
¡Déjame saber si eso funciona!