Si quieres lograr el clásico efecto de carrusel infinito (tipo “marquee”) donde logos, imágenes o textos se mueven sin parar en bucle continuo, Elementor Pro lo permite con una combinación de:
-
Un widget con Swiper (por ejemplo: Image Carousel / Slides / Testimonial Carousel).
-
Ajustes correctos de reproducción automática.
-
Un poco de CSS para que el movimiento sea lineal y se sienta “infinito”.
-
Y opcionalmente, un degradado en los bordes para que el carrusel “se desvanezca” al entrar y salir.
Te dejo el paso a paso para que lo apliques en minutos.
Qué necesitas antes de empezar
Elementor Pro
Un widget tipo carrusel (Swiper):
Image Carousel (recomendado para logos)
Slides
Testimonial Carousel
Imágenes o textos ya preparados (ideal: logos en PNG con fondo transparente)
Paso 1: Inserta el carrusel en tu sección
-
Abre tu página con Editar con Elementor.
-
Arrastra un widget tipo carrusel (por ejemplo Image Carousel).
-
Agrega tus imágenes, texto o íconos (6 de preferencia).
Tip pro (para efecto infinito real):
Repite los elementos. Por ejemplo, si tienes 8 logos, duplícalos para tener 16. Esto ayuda a que el bucle no se “note” cuando reinicia.
Paso 2: Configuración general del carrusel
Una vez que tengas agregado el carrusel en tu página, es momento de configurar su comportamiento para que el movimiento sea automático, continuo y sin interrupciones.
Dentro del panel de Settings / Ajustes del widget, configura las opciones de la siguiente manera:
-
Autoplay: Sí
Esto permite que el carrusel se mueva automáticamente sin necesidad de interacción del usuario. -
Scroll Speed (ms): (déjalo vacío o en el valor mínimo permitido)
La velocidad real del movimiento se controlará principalmente con la duración de transición y el CSS que agregaremos más adelante. -
Pause on hover: No
Evita que el carrusel se detenga cuando el usuario pase el cursor encima, manteniendo el efecto continuo. -
Pause on interaction: No
Impide que el carrusel se pause al hacer clic o interactuar con él. -
Infinite scroll: Sí
Esta opción es clave para que el carrusel se repita de forma infinita, creando el efecto de bucle continuo. -
Transition Duration (ms): 5000
Define qué tan suave y constante será el desplazamiento. Un valor alto ayuda a que el movimiento se sienta fluido y natural. -
Direction: Left o Right
Elige la opción que quieras que comience el desplazamiento, simulando un efecto tipo “marquee”. -
Offset Sides: None
No se aplica desplazamiento adicional en los bordes; esto se manejará visualmente más adelante con CSS.
⚠️ Nota: Algunas de estas opciones no se verán activas mientras editas con Elementor. Para ver el efecto real del carrusel infinito, es necesario previsualizar la página en el frontend.
Las siguientes configuraciones son adicionales para tener un estilo de contenedor de caja o box:
-
Diseño de Contenedor: Ocupa un contenedor tipo Flexbox con y de ancho completo o encajonar. La alineación centrada con dirección horizontal.
-
Avanzado en diseño: En el acolchado desvincula la opción dejándolo en “‘0”, esto hará que no tenga relleno.
-
Fondo de color: Agrega un color sólido o degradado si deseas para contrastar los elementos del carrusel.
- Borde redondeado (opcional): Puedes redondear el fondo del contenedor si tu contenedor NO ES de ancho completo, y esta en una caja.
Paso 3: Agrega el CSS para efecto “lineal” y carrusel infinito
Ahora sí, pega este CSS en el lugar correcto:
CSS Personalizado del widget (Elementor Pro)
Selecciona el widget del carrusel.
Ve a Avanzado → CSS personalizado.
Pega el código tal cual.
selector .swiper-wrapper{
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
selector {
position: relative;
overflow: hidden;
/* Borde interno */
box-shadow: inset 0 0 0 2px #3A6AFF; /* ← cambia el color aquí */
border-radius: 12px; /* opcional */
}
selector::before,
selector::after {
content: "";
position: absolute;
top: 0;
width: 150px;
height: 100%;
z-index: 2; /* el degradado queda encima del borde */
pointer-events: none;
}
selector::before {
left: 0;
background: linear-gradient(to right, #ffF 0%, transparent 100%);
}
selector::after {
right: 0;
background: linear-gradient(to left, #ffF 0%, transparent 100%);
}
Corregir texto espejo
Si tu texto o elemento de reflejo o invierte, copia y pega este código debajo de tu CSS adicional.
/* Mantiene el carrusel en RTL (para que vaya “al revés”) */
selector .swiper-wrapper{
direction: rtl !important;
}
/* Pero el contenido dentro de cada slide vuelve a LTR */
selector .swiper-slide,
selector .swiper-slide *{
direction: ltr !important;
unicode-bidi: plaintext;
}
Resumen explicado
transition-timing-function: linear;
Hace que el carrusel se mueva a velocidad constante, sin “acelerar” o “frenar” al final.overflow: hidden;
Evita que se vean elementos fuera del área del carrusel.::beforey::after
Crea un degradado en el borde izquierdo y derecho para que el contenido se “pierda” suavemente al entrar/salir.