Swiper es la biblioteca JavaScript que impulsa todos los carruseles de Elementor: Image Carousel, Media Carousel, Carrusel testimonial, Carrusel circular, y todos los terceros Widget de carrusel de Elementor has instalado. No es una función de Elementor. Es una biblioteca deslizante de código abierto que Elementor incluye.
Saber eso cambia la forma de depurar un carrusel roto. Cuando un control deslizante deja de funcionar, el problema casi nunca es el widget. Es que Swiper no se cargó, no se inicializó ni se inicializó antes de que su contenedor tuviera un ancho.
Solución rápida: el control deslizante dejó de funcionar después de una actualización del complemento
Si estás aquí porque un carrusel en funcionamiento murió repentinamente, prueba esto antes de leer cualquier otra cosa:
- Abra su complemento de optimización o almacenamiento en caché.
- Encuentre la configuración de JavaScript: Combinar JS, Aplazar JS, Retrasar JS.
- Apaga los tres. Borrar el caché. Recarga la página.
Si el carrusel regresa, la optimización de JS lo rompió y la solución es una exclusión en lugar de dejar la optimización desactivada. Exclusiones exactas más abajo.
Lo que realmente hace Swiper
Tres elementos anidados. Un contenedor, un envoltorio dentro de él y se desliza dentro de él. Swiper lee el ancho del contenedor, calcula cuánto mover el contenedor para cada diapositiva y aplica una transformación CSS en el contenedor. Las diapositivas nunca se mueven individualmente; toda la tira se desliza debajo de una ventana.
Por eso dominan dos categorías de errores:
El guión no se ejecutó. No se inicializa nada, por lo que ves todas las diapositivas apiladas o en fila sin interacción. El CSS de Swiper suele seguir ahí, por lo que parece a medio estilo en lugar de simplemente roto.
El contenedor no tenía ancho cuando midió. Swiper calculado contra cero, por lo que los deslizamientos se superponen, se sientan en el tamaño incorrecto o la pista salta. Este es el error de pestaña y acordeón: un carrusel dentro de un panel oculto se mide a sí mismo mientras está oculto.
Las cinco cosas que rompen los carruseles de Elementor
1. Combinación y aplazamiento de JavaScript
La causa más común por un amplio margen.
Swiper debe definirse antes de que se ejecute el código de inicialización en línea. Combinar archivos de reordenamiento de JS. Aplazar la ejecución pasa más allá de la llamada en línea. Retrasar JS retiene la biblioteca hasta la interacción del usuario, momento en el que el inicio ya se activó y falló.
Abra la consola de su navegador. Si ves Swiper is not defined o Cannot read properties of undefined, este es tu problema.
Arreglar: excluya los identificadores del deslizador de la optimización en lugar de deshabilitarlos por completo. En LiteSpeed Cache que está en Optimización de página → Configuración de JS. Agregar:
swiper
elementor-frontend
jquery-coreUna cosa que la gente extraña en LiteSpeed: hay campos de exclusión separados y El modo invitado tiene el suyo propio. Si solo llena el cuadro principal de Exclusiones de JS, los usuarios que han iniciado sesión ven un carrusel que funciona y los visitantes que no lo hacen, que es exactamente el error que sobrevive a las pruebas, porque no ha iniciado sesión mientras realiza la prueba. Coloque las mismas exclusiones en el campo Modo invitado.
WP Rocket: Optimización de archivos → Archivos JavaScript excluidos, más las mismas cadenas en Retrasar la ejecución de JavaScript. Autoptimize: Extra → Excluir scripts de Autoptimize.
2. Carrusel dentro de un contenedor oculto
Un carrusel en una pestaña, acordeón o panel fuera de lienzo se inicializa mientras el panel está display: none. El ancho se lee como cero y las matemáticas son incorrectas desde el primer cuadro. Abra la pestaña y obtendrá diapositivas superpuestas o una pista que no se moverá.
Arreglar: la mayoría de los widgets exponen una configuración de “observador”. Enciéndelo y Swiper observa si hay cambios de tamaño y recalcula. Si el tuyo no lo hace, coloque el carrusel en la primera pestaña, que es visible durante la carga.
3. Modo bucle con muy pocas diapositivas
El bucle funciona clonando diapositivas para falsificar el envoltorio. Necesita al menos el doble de cuenta de diapositivas por vista para tener suficiente para clonar. Cuatro diapositivas a tres por vista producen un salto visible, espacios en blanco o una pista que se detiene a mitad de camino.
Arreglar: agregue diapositivas o desactive el bucle. No hay ninguna configuración que haga que un bucle corto sea fluido.
4. Dos versiones de Swiper en una página
Elementor agrupa una versión; algunos complementos agrupan los suyos propios. Ambos registran el mismo global. Gana lo que se cargue en segundo lugar, y si se creó un widget con una API diferente, se rompe, a menudo con un error sobre un método que no existe.
Arreglar: en la consola, corre Swiper.version. Luego desactive los complementos uno a la vez hasta que deje de cambiar. Los complementos de buen comportamiento reutilizan la copia de Elementor en lugar de enviar la suya propia. La comparación del complemento carrusel notas que hacen.
5. Carga perezosa luchando contra el control deslizante
La carga lenta de imágenes agresivas, especialmente un complemento de carga diferida separado encima del tema, puede dejar imágenes de diapositivas a altura cero hasta que se desplacen hacia la vista. Excepto que nunca se desplazan hacia la vista, porque están en una pista horizontal. Resultado: un carrusel de cajas vacías.
Arreglar: excluya la clase de imagen del carrusel del complemento de carga diferida o establezca ancho y alto explícitos en las imágenes para que las cajas reserven espacio. Vídeo carruseles golpea esto con más fuerza, porque cada diapositiva fuera de la pantalla lleva un reproductor además de una imagen.
Cómo comprobar si Swiper está cargado
Treinta segundos y te dice cuál es la mitad del problema que tienes.
- Abre la página con el carrusel roto.
- Abra la consola del navegador (F12, o haga clic derecho en → Inspeccionar → Consola).
- Tipo
typeof Swipery presione enter.
"function" significa que la biblioteca está cargada, por lo que su problema es la inicialización: mire los contenedores ocultos o la configuración del bucle. "undefined" significa que nunca llegó y la causa es la optimización de JS o un script que falló anteriormente en la cadena. Desplácese hacia arriba en la consola para ver el primer error rojo, no el último; Los errores posteriores suelen ser consecuencias del primero.
Configuraciones de Swiper que importan en Elementor
La mayoría de los widgets los exponen en Configuración del carrusel, a veces con etiquetas diferentes:
- Diapositivas por vista: cuántos son visibles; es el único entorno el que separa un carrusel de un control deslizante. Establecer por punto de interrupción, siempre.
- Diapositivas para desplazarse: cuántos avances por clic. Establecer esto igual a diapositivas por vista le brinda paginación estilo página; establecerlo en 1 da una sensación continua.
- Velocidad: duración de la transición en ms. 300 a 500 para estándar, más lento para 3D.
- Retraso de reproducción automática: pausa en cada diapositiva. Establezca en 0 y se convertirá en a marquesina, que es como el Widget de control deslizante de logotipo suele estar configurado.
- Bucle: envoltura infinita. Necesita suficientes diapositivas, como arriba.
- Altura automática: el contenedor coincide con la diapositiva visible más alta. Útil para texto desigual e introduce una animación de altura que puede parecer nerviosa, por lo que vale la pena probarla en lugar de asumirla.
- Diapositivas centradas: la diapositiva activa se ubica en el centro en lugar de al ras a la izquierda. Necesario para que el flujo de cobertura mire hacia la derecha.
Donde estos aparecen en el libre Widget de carrusel de imágenes: el tutorial del carrusel de imágenes tiene las capturas de pantalla del panel.
¿deberías cargar tu propio Swiper?
No, en casi todos los casos. La copia de Elementor ya está en la página cada vez que hay un widget de carrusel presente, y agregar uno segundo provoca el conflicto de versiones anterior.
La excepción es un control deslizante personalizado en una página sin ningún widget de carrusel de Elementor. Entonces el Swiper de Elementor no está en cola y necesitas el tuyo propio. Ponlo en cola condicionalmente, solo en esa plantilla, para que no reintroduzcas el conflicto en ningún otro lugar.
Preguntas frecuentes
¿qué es Swiper en Elementor?
Swiper es la biblioteca deslizante de JavaScript de código abierto que Elementor utiliza para todos sus widgets de carrusel y control deslizante. Elementor lo agrupa y lo pone en cola cada vez que aparece un widget de carrusel en la página. La mayoría de los complementos de carrusel de Elementor de terceros utilizan la misma copia en lugar de enviar la suya propia.
¿por qué mi control deslizante Elementor Swiper no funciona?
Nueve de cada diez veces es optimización de JavaScript desde un complemento de almacenamiento en caché: combine, posponga o retrase JS reordenando los scripts para que Swiper no esté definido cuando se ejecute el código de inicio. Apague esos tres y vuelva a cargarlos. Si el control deslizante regresa, agregue swiper, elementor-frontend y jquery-core a las exclusiones JS del complemento en lugar de dejar la optimización deshabilitada.
¿cómo arreglo “Swiper no está definido”?
La biblioteca no se cargó antes de que se ejecutara el código de inicialización. Excluya la combinación de swiper de JS, aplazando y retrasando su complemento de caché. En LiteSpeed, agregue las exclusiones al campo Modo invitado así como al principal; de lo contrario, funciona para usuarios que han iniciado sesión y pausas para visitantes.
¿qué versión de Swiper utiliza Elementor?
Cambia con los lanzamientos de Elementor. Compruébalo en cualquier página con carrusel abriendo la consola y ejecutándola Swiper.version. Si eso devuelve un número diferente al esperado, un complemento está cargando su propia copia y anulando la de Elementor.
¿por qué mis diapositivas se superponen o se apilan una encima de la otra?
Swiper midió el contenedor con un ancho cero, generalmente porque el carrusel se encuentra dentro de una pestaña oculta, un acordeón o una ventana emergente al cargar la página. Habilite la configuración del observador para que vuelva a calcular cuándo el contenedor se vuelve visible o mueva el carrusel a un panel que esté abierto de forma predeterminada.
¿por qué mi carrusel funciona cuando inicio sesión pero no para los visitantes?
Almacenamiento en caché. Los usuarios que inician sesión normalmente omiten el caché y obtienen scripts no optimizados, por lo que el control deslizante funciona. Los visitantes obtienen la versión almacenada en caché, combinada y diferida y se rompe. Pruebe en una ventana privada y verifique si hay un invitado separado o una lista de exclusión no autenticada en su complemento de caché.
Si todavía está roto
Trabaje en este orden: verifique primero la consola (typeof Swiper), luego exclusiones de caché, luego desactive los complementos uno a la vez en una copia de puesta en escena. Esa secuencia encuentra la causa en menos de diez minutos para casi todos los casos.
Diseños importados a través del Creador de widgets utilice la misma compilación de Swiper que los widgets originales, por lo que estas correcciones también se aplican a ellos. El página de precios cubre cuál de los veinte necesita licencia.
Si prefieres empezar desde algo conocido-bueno, cada widget de carrusel en el Widgets del carrusel Elementor la página se envía con los identificadores de script seguros para exclusión documentados y el Guía del carrusel circular cubre la variante de consulta dinámica de los mismos problemas. Si está eligiendo un widget en lugar de solucionarlo, el desglose gratuito del widget del carrusel y el veinte plantillas deslizantes son los dos lugares para empezar.
