¿Cómo utilizar Carruseles en el Editor de bloques de Waclis?
Los Carruseles del Editor de bloques de Waclis permiten presentar varios contenidos dentro de una estructura desplazable.
En lugar de mostrar todos los elementos simultáneamente, el visitante puede recorrer diferentes contenidos dentro de un mismo espacio.
Por ejemplo:
← [ Producto 1 ] [ Producto 2 ] [ Producto 3 ] →
o:
← [ Imagen ] [ Imagen ] [ Imagen ] →
Dependiendo del diseño seleccionado, un carrusel puede utilizarse para presentar:
imágenes;
productos destacados;
categorías;
marcas;
servicios;
proyectos;
testimonios;
promociones;
contenido visual;
Cards;
enlaces.
Dentro del Editor de bloques encontrarás diseños prediseñados en:
Secciones → Carruseles
Además, dentro de los componentes disponibles encontrarás:
Componentes → Elementos → Carousel
Esto permite tanto incorporar una sección ya diseñada como construir una composición más personalizada.
¿Qué es un Carrusel?
Un Carrusel es un contenedor que agrupa diferentes elementos o Slides que pueden desplazarse.
Conceptualmente puede tener una estructura similar a:
Carousel
└── Track
├── Slide
│ └── contenido
├── Slide
│ └── contenido
├── Slide
│ └── contenido
└── Slide
└── contenido
Cada Slide puede contener:
Image;
Link;
Heading;
Paragraph;
Card;
otros componentes.
La estructura exacta dependerá del Carrusel elegido.
Ejemplo con imágenes enlazadas
Una estructura habitual puede ser:
Carousel
└── Track
├── Slide
│ └── Link
│ └── Image
│
├── Slide
│ └── Link
│ └── Image
│
└── Slide
└── Link
└── Image
Aquí:
Slide representa la unidad que se desplaza.
Link controla el destino al hacer clic.
Image controla la fotografía.
Esta diferencia será muy importante cuando edites el contenido.
Carrusel, Slider y Galería no son lo mismo
Dentro de la biblioteca también encontrarás:
Galerías de imágenes;
Sliders de imágenes.
Aunque pueden contener fotografías, no tienen exactamente el mismo objetivo.
Galería de imágenes
Muestra varias imágenes simultáneamente dentro de una composición.
Por ejemplo:
[ 1 ] [ 2 ] [ 3 ]
[ 4 ] [ 5 ] [ 6 ]
El visitante puede observar muchas fotografías sin realizar ninguna acción.
Carrusel
Organiza varios elementos dentro de un recorrido desplazable.
Por ejemplo:
← [ 1 ] [ 2 ] [ 3 ] →
Puede existir más contenido fuera del área visible.
Slider de imágenes
Está orientado principalmente a presentar imágenes de forma secuencial, normalmente con mayor protagonismo para una imagen o composición reducida por vez.
Por ejemplo:
← [ IMAGEN ] →
¿Cuál conviene utilizar?
Utiliza Galería cuando quieres que varias imágenes permanezcan visibles al mismo tiempo.
Utiliza Carrusel cuando quieres permitir que el visitante recorra un conjunto de elementos dentro de una misma área.
Utiliza Slider de imágenes cuando el protagonismo está principalmente en una secuencia de imágenes grandes.
Ejemplo: categorías
Carrusel:
← [ Botellas ] [ Mochilas ] [ Tecnología ] →
El visitante puede desplazarse para descubrir más categorías.
Ejemplo: marcas
← [ Marca 1 ] [ Marca 2 ] [ Marca 3 ] [ Marca 4 ] →
Puede resultar útil cuando tienes muchas marcas pero no quieres ocupar varias filas.
Ejemplo: proyectos
← [ Proyecto 1 ] [ Proyecto 2 ] [ Proyecto 3 ] →
Cada Slide puede incluir:
fotografía;
título;
enlace.
¿Cómo agregar un Carrusel?
Ingresa al Editor de bloques de la página o área editable donde quieras incorporarlo.
Después abre:
Secciones
y selecciona:
Carruseles
Paso 1: abre Carruseles
Waclis mostrará las composiciones prediseñadas disponibles.
Elige principalmente según:
tipo de contenido;
tamaño de los elementos;
cantidad de Slides visibles;
relación entre imágenes y textos;
espacio disponible;
estilo general.
No es necesario mantener los contenidos de ejemplo.
Paso 2: agrega el diseño elegido
Selecciona la composición.
El Carrusel pasará a formar parte del contenido de la página y podrás comenzar a personalizar sus Slides.
Paso 3: utiliza Navigator
En Carruseles, Navigator es especialmente importante.
Una misma área visual puede contener varios niveles.
Por ejemplo:
Carousel
└── Track
└── Slide
└── Link
└── Image
Si haces clic sobre la imagen, puedes terminar seleccionando:
Image
Pero tal vez quieras modificar:
Link;
Slide;
Track;
Carousel completo.
Navigator permite identificar exactamente el nivel correcto.
¿Qué significa cada nivel?
Carousel
Es la estructura general.
Contiene todo el Carrusel.
Track
Es el contenedor dentro del cual se organizan los Slides.
Puedes imaginarlo como:
TRACK
[ Slide 1 ][ Slide 2 ][ Slide 3 ][ Slide 4 ]
La estructura de desplazamiento se organiza dentro de este nivel.
Slide
Es cada unidad individual.
Por ejemplo:
Slide 1
→ Botellas
Slide 2
→ Mochilas
Slide 3
→ Tecnología
Cuando quieres:
clonar;
eliminar;
mover;
una unidad completa, normalmente debes identificar el Slide o el contenedor equivalente.
Link
Si un Slide es clicable, puede contener un:
Link
Por ejemplo:
Slide
└── Link
└── Image
Selecciona Link para modificar la URL.
Image
Controla la fotografía.
Selecciona Image para:
Set Image;
Alt;
Width;
Height;
otras propiedades disponibles.
No confundas el contenido con el Slide
Este es uno de los errores más frecuentes.
Visualmente puedes ver:
[ BOTELLAS ]
pero estructuralmente puede ser:
Slide
└── Link
├── Image
└── Heading
Si clonas solamente Image, no crearás una nueva categoría completa.
Ejemplo
Quieres pasar de:
← [ Botellas ] [ Mochilas ] [ Tecnología ] →
a:
← [ Botellas ] [ Mochilas ] [ Tecnología ] [ Textil ] →
Debes duplicar:
el Slide completo
y luego modificar su contenido.
No clones solamente la imagen
Si haces eso podrías terminar con:
Slide 1
├── Image
├── Image
└── Heading
en lugar de crear un nuevo Slide.
Paso 4: reemplaza las imágenes
Selecciona:
Image
Después abre:
Contenido → Set Image
y elige la fotografía correspondiente.
Repite el procedimiento para cada Slide.
No necesitas conservar imágenes de ejemplo
Por ejemplo:
Carrusel original:
[ Foto 1 ]
[ Foto 2 ]
[ Foto 3 ]
puede convertirse en:
[ Botellas ]
[ Mochilas ]
[ Cuadernos ]
sin cambiar necesariamente la estructura general.
Paso 5: completa Alt
Para imágenes que aportan contenido, utiliza:
Alt
Por ejemplo:
Botella térmica negra
Mochila corporativa gris
Categoría de productos tecnológicos
Evita:
foto1
imagen2
Paso 6: configura enlaces
Si cada Slide dirige hacia un destino:
utiliza Navigator;
selecciona Link;
abre Contenido;
modifica URL.
Ejemplo
Botellas
→ /productos/botellas
Mochilas
→ /productos/mochilas
Tecnología
→ /productos/tecnologia
Revisa cada URL después de clonar
Una copia puede mantener el enlace del elemento original.
Por ejemplo:
Original:
Botellas
→ /botellas
Clonado:
Mochilas
→ /botellas
hasta que modifiques su URL.
Paso 7: reemplaza títulos y textos
Si el Carrusel contiene:
Heading;
Paragraph;
Button;
selecciona cada elemento y modifica su contenido.
Ejemplo de Card dentro de Slide
Slide
└── Card
├── Image
├── Heading
├── Paragraph
└── Button
Puedes crear:
Imagen
Diseño
Desarrollamos soluciones personalizadas.
[ Conocer más ]
Mantén los Slides visualmente consistentes
Cuando varios Slides pertenecen al mismo Carrusel, suele ser conveniente que compartan:
mismas dimensiones;
misma estructura;
misma Typography;
mismo Padding;
mismo Border radius;
misma lógica de imágenes.
Evita mezclar estructuras completamente distintas sin intención
Por ejemplo:
Slide 1
→ solo imagen
Slide 2
→ imagen + título + texto
Slide 3
→ botón enorme
puede hacer que el Carrusel se perciba desorganizado.
Los Slides pueden compartir Classes
Por ejemplo:
carousel-card
para todas las Cards.
Esto permite mantener estilos comunes.
Linked styles
Si modificas una Card y Waclis muestra:
Linked styles
puede significar que esa Class es utilizada por varios Slides.
Esto puede ser exactamente lo que necesitas si todas las Cards deben verse iguales.
Si quieres destacar un Slide
Mantén la Class general.
Puedes agregar:
destacado
o un ID único cuando corresponda.
Por ejemplo:
class="carousel-card destacado"
No elimines Classes compartidas innecesariamente
Pueden controlar:
tamaño;
responsive;
Hover;
estructura;
otros aspectos visuales.
Agregar un nuevo Slide
El procedimiento recomendado es:
abre Navigator;
localiza un Slide completo;
selecciónalo;
utiliza Clonar elemento;
modifica:
imagen;
Alt;
título;
texto;
URL;
botón;
ID, si corresponde.
Revisa el lugar de la copia
Después de clonar comprueba Navigator.
La copia debería permanecer dentro de la estructura del Carrusel.
Conceptualmente:
Carousel
└── Track
├── Slide
├── Slide
├── Slide
└── Slide nuevo
Si la copia queda fuera del Track
El Carrusel puede no reconocerla como parte del recorrido.
Por eso Navigator es fundamental.
Eliminar un Slide
Si necesitas reducir la cantidad:
selecciona el Slide completo;
comprueba Navigator;
utiliza Eliminar elemento.
Recuerda
Waclis no solicita confirmación.
Si eliminas el nivel incorrecto utiliza:
Deshacer
inmediatamente.
No elimines solamente Image
Si quieres eliminar todo el Slide, no dejes:
Slide
└── espacio vacío
dentro del Carrusel.
Selecciona la unidad completa.
No elimines Track accidentalmente
Si seleccionas un nivel demasiado alto y eliminas:
Track
puedes eliminar todos los Slides que contiene.
Antes de utilizar la papelera comprueba Navigator.
Mover Slides
Puedes cambiar el orden.
Por ejemplo:
Antes:
Botellas
Mochilas
Tecnología
Textil
Después:
Tecnología
Botellas
Mochilas
Textil
Selecciona la unidad completa y utiliza las herramientas para mover elementos.
El orden importa
Los primeros Slides suelen ser visibles antes.
Coloca primero:
contenidos más importantes;
promociones prioritarias;
categorías principales;
proyectos destacados.
No dependas de que el visitante recorra todo el Carrusel
Si tienes:
20 Slides
es posible que muchas personas no lleguen al último.
No coloques información esencial únicamente en las posiciones finales.
Cantidad de Slides
No existe una cantidad obligatoria.
Puedes tener:
3;
4;
6;
10;
otra cantidad.
Pero un Carrusel con demasiados elementos puede convertirse en un recorrido largo.
Si tienes mucho contenido
Considera:
priorizar;
dividir en categorías;
utilizar más de un Carrusel;
utilizar una Galería;
crear una página específica.
Cantidad visible y cantidad total no son lo mismo
Puedes tener:
10 Slides totales
pero mostrar visualmente solamente algunos al mismo tiempo.
Por ejemplo:
← [ 1 ] [ 2 ] [ 3 ] →
con más Slides disponibles al desplazarse.
La cantidad visible depende del diseño
No todos los Carruseles tienen la misma configuración.
Puede estar definida por:
estructura;
dimensiones de los Slides;
estilos;
comportamiento del componente.
No asumas que todos mostrarán siempre tres elementos.
Revisa desktop, tablet y celular
Un Carrusel puede mostrar:
Desktop
← [ 1 ] [ 2 ] [ 3 ] [ 4 ] →
Tablet
← [ 1 ] [ 2 ] →
Celular
← [ 1 ] →
Este tipo de adaptación puede resultar mucho más cómoda que intentar mantener cuatro Cards estrechas en móvil.
No reduzcas excesivamente los Slides
Especialmente si contienen:
títulos;
párrafos;
botones.
El contenido necesita suficiente ancho para ser legible.
Carruseles de logotipos
En cambio, puede resultar razonable mostrar varias unidades pequeñas.
Por ejemplo:
← [Logo][Logo][Logo][Logo] →
porque cada elemento requiere menos espacio.
Diseña según el contenido
No existe una configuración responsive universal.
Pregúntate:
¿Cuánto espacio necesita cada Slide para comprenderse correctamente?
Imágenes en Carruseles
Uno de los puntos más importantes es mantener dimensiones visuales consistentes.
Por ejemplo:
[ imagen horizontal ]
[ imagen vertical ]
[ imagen cuadrada ]
pueden generar Slides irregulares si no se define un comportamiento común.
Cover
Utiliza conceptualmente:
object-fit: cover;
cuando quieres que la fotografía llene el espacio, aunque pueda recortarse.
Puede ser útil para:
categorías;
proyectos;
fotografías decorativas;
Cards visuales.
Contain
Utiliza conceptualmente:
object-fit: contain;
cuando necesitas mostrar la imagen completa.
Puede ser apropiado para:
productos;
logotipos;
objetos;
ilustraciones.
Ejemplo: Carrusel de productos
← [ Botella ] [ Mochila ] [ Cuaderno ] →
Si los objetos deben verse completos, puede ser apropiado utilizar Contain.
Ejemplo: Carrusel de proyectos
← [ Casa ] [ Oficina ] [ Local ] →
Si quieres que todas las fotografías llenen Cards iguales, puede ser preferible Cover.
No deformes las imágenes
Evita forzar Width y Height de forma que alteren la proporción de la fotografía.
Utiliza un comportamiento adecuado de adaptación.
Carrusel de marcas
Para logotipos suele ser especialmente importante:
mostrar la marca completa.
Puede resultar apropiado mantener:
object-fit: contain
junto con un espacio interior uniforme.
Fondo para logotipos
Si los logos tienen diferentes proporciones, puede ser útil utilizar una Card consistente:
┌─────────────────┐
│ │
│ LOGO │
│ │
└─────────────────┘
con el logotipo centrado.
No amplíes excesivamente logotipos pequeños
La calidad puede deteriorarse.
Utiliza archivos apropiados.
Controles de navegación
Dependiendo del diseño, el Carrusel puede incluir controles para desplazarse.
Por ejemplo:
← →
o indicadores visuales.
No todos los diseños necesariamente utilizan los mismos controles.
Comprueba que los controles sean visibles
Revisa:
contraste;
tamaño;
posición;
funcionamiento.
Un control blanco sobre una fotografía muy clara puede resultar difícil de identificar.
No coloques contenido encima de los controles
Si personalizas la estructura, comprueba que:
títulos;
botones;
imágenes;
no se superpongan a las áreas de navegación.
Controles en celular
Deben seguir siendo:
visibles;
utilizables;
suficientemente separados del contenido.
Comprueba el comportamiento real mediante Ver página.
No asumas el comportamiento únicamente desde el editor
El Carrusel es un elemento interactivo.
Por eso debes probarlo también en el frontend.
Guardar y probar
Después de realizar cambios:
Guardar Cambios → Ver página
y comprueba:
desplazamiento;
controles;
enlaces;
imágenes;
responsive.
¿El Carrusel puede desplazarse automáticamente?
El comportamiento dependerá del diseño o implementación utilizada.
No todos los Carruseles tienen que funcionar de la misma manera.
Si el diseño ya posee un comportamiento funcional, no modifiques su lógica sin necesidad.
Evita agregar JavaScript solamente para cambiar la apariencia
Si quieres:
Border radius;
Padding;
color;
Hover;
utiliza Estilo o CSS.
No reconstruyas la lógica del Carrusel.
Si el Carrusel ya funciona, conserva su comportamiento
Esta es una recomendación especialmente importante.
Si puedes desplazarte correctamente entre Slides y solamente quieres cambiar:
imágenes
colores
espacios
tipografía
no necesitas tocar:
JavaScript;
dependencias;
estructura funcional.
Classes internas
Los Carruseles pueden utilizar varias Classes para:
Track;
Slides;
Links;
Images;
controles.
No elimines o reemplaces arbitrariamente esas Classes.
Ejemplo de una ruta de elementos
En un Carrusel avanzado puedes encontrar una relación similar a:
#carousel-track
>
.slide
>
.link
>
.image
Esto representa el camino desde un contenedor general hasta la imagen.
No necesitas memorizar estos selectores
Utiliza:
Navigator;
Class;
ID;
Linked styles;
para comprender qué elemento estás modificando.
Selectores largos
Puedes encontrarte con estilos asociados a rutas similares a:
#ntx-carousel-track-1
>
.ntx-slide
>
.ntx-link
>
.ntx-img
Esto indica que el estilo está dirigido a una imagen dentro de una estructura concreta.
No modifiques ese selector sin comprender su alcance.
Linked styles en imágenes del Carrusel
Puede aparecer una advertencia indicando que varias imágenes comparten estilo.
Esto suele ser lógico.
Por ejemplo:
Slide 1 → .ntx-img
Slide 2 → .ntx-img
Slide 3 → .ntx-img
Así todas mantienen:
misma altura;
mismo Border radius;
mismo comportamiento.
No agregues un ID a cada imagen solo para eliminar Linked styles
Si todas deben tener el mismo diseño, el estilo compartido es útil.
Utiliza un identificador específico únicamente cuando realmente quieras una excepción.
Carrusel de Cards
También puedes utilizar contenido más completo.
Por ejemplo:
←
┌─────────────────┐
│ Imagen │
│ Servicio │
│ Descripción │
│ [ Ver más ] │
└─────────────────┘
→
Cada Slide contiene una Card.
Mantén textos razonablemente similares
Si una Card contiene:
Servicio A
2 líneas
y otra:
Servicio B
15 líneas
las alturas pueden resultar inconsistentes.
Intenta mantener:
títulos breves;
descripciones similares;
estructura repetible.
Height fijo en Cards
Utilízalo con precaución.
Si defines:
height: 300px;
y luego el contenido crece, puede cortarse.
Puede ser preferible trabajar con:
Min Height;
layout flexible;
contenido más conciso.
Carrusel de testimonios
También puede utilizarse para presentar opiniones.
Por ejemplo:
← [ Testimonio 1 ] [ Testimonio 2 ] →
En ese caso aplican también las buenas prácticas de:
Testimonios;
longitudes;
nombres;
fotografías;
atribución.
Carrusel de productos o categorías
Puede utilizarse como navegación visual.
Por ejemplo:
← [ Botellas ] [ Mochilas ] [ Bazar ] →
Cada Slide dirige a su categoría.
Comprueba todas las URLs.
Carrusel de promociones
Puedes utilizar:
← [ Promoción A ] [ Promoción B ] [ Promoción C ] →
Pero si cada promoción utiliza una imagen muy grande y ocupa toda la pantalla, puede acercarse más al concepto de Slider de imágenes o Banner.
Elige según la composición.
Carrusel vs Slider: una regla práctica
Piensa:
¿Quiero recorrer varias Cards o elementos?
Carrusel
¿Quiero recorrer grandes imágenes protagonistas?
Slider de imágenes
No es una regla técnica absoluta, sino una guía para elegir la sección más adecuada.
Carrusel y ancho completo
Algunos diseños pueden necesitar una Section:
Container width → Full
mientras que otros funcionarán mejor dentro de:
Boxed
Dependerá de la composición.
Carrusel dentro de un contenedor Boxed
Puede verse así:
← [ 1 ] [ 2 ] [ 3 ] →
con márgenes laterales.
Carrusel Full
Puede aprovechar un área más amplia:
← [ 1 ] [ 2 ] [ 3 ] [ 4 ] [ 5 ] →
si el diseño lo requiere.
No utilices Full automáticamente
Una fila extremadamente ancha puede dificultar:
lectura;
tamaño de Slides;
control visual.
Elige según el contenido.
Margin y Padding
Puedes utilizar:
Padding de Section;
separación entre Slides;
Padding interno de Cards.
No intentes construir el Carrusel mediante grandes márgenes manuales.
Espacio entre Slides
Una separación adecuada ayuda a distinguir cada unidad.
Por ejemplo:
[1][2][3]
puede sentirse demasiado compacto.
Mientras:
[1] [2] [3]
puede ser más claro.
No exageres la separación
Si el espacio es demasiado grande, puede parecer que cada Slide pertenece a una sección distinta.
Border radius
Puede aplicarse sobre:
Image;
Card;
contenedor.
Selecciona el nivel correcto.
Ejemplo
Si quieres redondear solamente la fotografía:
Image → Border radius
Si quieres redondear toda la Card:
Card → Border radius
Imágenes y overflow
Si amplías una imagen mediante Hover dentro de una Card con esquinas redondeadas, puede ser necesario controlar el contenido que sobresale.
Por ejemplo, en personalizaciones avanzadas puede utilizarse:
overflow: hidden;
sobre el contenedor correcto.
Utiliza CSS únicamente si la configuración visual no resuelve el resultado.
Hover en Slides
Puedes utilizar efectos moderados.
Por ejemplo:
.categorias-carousel .carousel-card {
transition: transform .3s ease;
}
.categorias-carousel .carousel-card:hover {
transform: translateY(-4px);
}
Hover en imágenes
Otra alternativa:
.categorias-carousel .carousel-image {
transition: transform .3s ease;
}
.categorias-carousel .carousel-card:hover .carousel-image {
transform: scale(1.03);
}
No exageres Scale
Un valor grande puede provocar:
superposición;
recorte;
cambios bruscos.
Los efectos sutiles suelen funcionar mejor.
Hover y celular
Recuerda que Hover no funciona de la misma manera en dispositivos táctiles.
No ocultes información importante hasta que el visitante pase el cursor.
Animaciones
Puedes utilizar:
Avanzado → Animate on scroll
sobre:
Carrusel completo;
Section;
otras estructuras.
Evita animar cada Slide independientemente si ya existe movimiento
El Carrusel ya introduce una interacción visual.
Agregar numerosas animaciones puede hacerlo excesivamente dinámico.
Una animación de entrada de la Section suele ser suficiente
Por ejemplo:
Carrusel completo
→ aparece suavemente
y luego mantiene su propio comportamiento.
Carrusel en Home
Puede ser útil para:
categorías;
marcas;
productos complementarios;
servicios;
proyectos.
Ejemplo
Banner
↓
CATEGORÍAS DESTACADAS
← [ Botellas ] [ Mochilas ] [ Tecnología ] →
↓
Productos destacados
Carrusel antes de Productos
También puede utilizarse como navegación visual hacia categorías antes del catálogo dinámico.
Carrusel después de Productos
Puede utilizarse para:
marcas;
beneficios visuales;
contenidos relacionados;
proyectos.
Carrusel en una sección personalizada
Puedes crear páginas como:
Proyectos;
Clientes;
Marcas;
Categorías;
y utilizar Carruseles dentro de la composición.
No reemplaces contenido dinámico con un Carrusel estático sin necesidad
Si Waclis ya administra dinámicamente productos en una página, utiliza el Carrusel como contenido complementario cuando corresponda.
Carrusel y rendimiento
Un Carrusel con muchas imágenes puede aumentar el peso de la página.
Utiliza archivos adecuados para web.
Evita cargar imágenes extremadamente grandes si se visualizarán en Slides relativamente pequeños.
Especialmente en móvil
El visitante puede estar utilizando:
conexión más lenta;
datos móviles.
Por eso la optimización de imágenes sigue siendo importante.
No agregues 30 imágenes de gran tamaño solamente porque están ocultas inicialmente
Aunque no todas sean visibles simultáneamente, forman parte del contenido que debe administrar la página.
Prioriza.
Accesibilidad de los controles
Los controles deberían resultar identificables y utilizables.
Comprueba especialmente:
contraste;
tamaño;
visibilidad;
navegación.
Texto de enlaces
Si el Slide utiliza un Button:
Ver producto
Conocer proyecto
Explorar categoría
es preferible a:
Click aquí
Carrusel y movimiento automático
Cuando un Carrusel tenga movimiento automático según su diseño, comprueba que el visitante pueda:
leer el contenido;
utilizar enlaces;
interactuar con los controles.
Evita que los Slides cambien tan rápidamente que impidan consumir la información.
Si el comportamiento actual funciona correctamente, no modifiques la lógica sin una razón concreta.
Si el Carrusel se mueve demasiado rápido
Primero identifica si el diseño permite controlar este comportamiento.
No agregues inmediatamente JavaScript adicional sobre el componente existente.
Si el Carrusel no se mueve
Realiza este diagnóstico:
comprueba Ver página;
revisa Navigator;
verifica que los Slides continúen dentro del Track;
comprueba que no hayas eliminado Classes estructurales;
revisa modificaciones de HTML;
revisa CSS que pueda estar alterando el Track;
utiliza Deshacer si el problema apareció después de un cambio reciente.
No reconstruyas el Carrusel de inmediato
Si anteriormente funcionaba y dejó de hacerlo después de editar:
la causa probablemente esté relacionada con el último cambio.
Diagnostica primero.
Si funciona en el editor pero no en Ver página
Comprueba:
que guardaste;
estructura;
scripts;
dependencias;
CSS;
Slides;
controles.
El frontend es la prueba definitiva del comportamiento.
Si funciona en desktop pero no en móvil
Revisa:
ancho de los Slides;
cantidad visible;
Width fijo;
Min Width;
imágenes;
controles;
CSS responsive.
Scroll horizontal
Un Carrusel utiliza desplazamiento internamente, pero esto no significa que toda la Página web deba desplazarse lateralmente.
Si aparece scroll horizontal general, revisa:
Track;
Width;
Position;
Margin;
Slides;
CSS personalizado.
No soluciones el problema aplicando globalmente
body {
overflow-x: hidden;
}
sin identificar primero qué elemento desborda.
Eso puede esconder el síntoma sin solucionar la causa.
Si un Slide queda cortado
Comprueba:
Width;
contenedor;
cantidad visible;
Padding;
Track;
Overflow.
El recorte puede ser parte del diseño o un problema de dimensiones.
Si las imágenes tienen alturas diferentes
Puedes utilizar una Class compartida.
Por ejemplo:
carousel-image
y aplicar un comportamiento común.
Ejemplo para fotografías
.proyectos-carousel .carousel-image {
width: 100%;
height: 280px;
object-fit: cover;
}
Ejemplo para productos
.productos-carousel .carousel-image {
width: 100%;
height: 280px;
object-fit: contain;
}
Utiliza scope
Evita:
.carousel img {
}
si no sabes si existen otros Carruseles.
Puedes utilizar:
.productos-carousel .carousel-image {
}
para limitarlo.
Más de un Carrusel en la misma página
Puedes tener:
Carrusel de categorías
Carrusel de marcas
Carrusel de proyectos
Por eso es muy útil identificar cada uno.
Ejemplo de Classes
categorias-carousel
marcas-carousel
proyectos-carousel
No utilices exactamente las mismas reglas si los contenidos necesitan comportamientos diferentes
Por ejemplo:
Marcas
→ Contain.
Proyectos
→ Cover.
No fuerces una misma regla global sobre ambos.
IDs únicos
Si cada Carrusel utiliza un identificador específico, asegúrate de que sea único.
Por ejemplo:
id="carousel-marcas"
y:
id="carousel-proyectos"
Cuidado al clonar Carruseles completos
Si duplicas una estructura entera que contiene IDs personalizados, revisa esas identificaciones.
No mantengas dos Carruseles con el mismo ID.
Clonar un Slide y clonar un Carrusel son acciones muy diferentes
Clonar Slide
Agrega otra unidad dentro del mismo Carrusel.
Carousel
├── Slide
├── Slide
└── Slide nuevo
Clonar Carousel
Duplica toda la estructura.
Carousel 1
Carousel 2
Selecciona cuidadosamente el nivel antes de utilizar Clonar.
Utiliza la etiqueta del elemento seleccionado
La barra contextual puede mostrar referencias como:
IMG .ntx-img
A .ntx-link
SECTION
Esto puede ayudarte a comprender qué nivel estás modificando.
Seleccionar padre
Si tienes seleccionada:
Image
puedes utilizar:
Seleccionar padre
para subir progresivamente.
Por ejemplo:
Image
↑
Link
↑
Slide
↑
Track
según la estructura.
Utiliza Navigator cuando necesites saltar directamente
Si quieres seleccionar Track, Navigator suele ser más rápido que subir nivel por nivel.
Editar código HTML
Si necesitas una modificación estructural muy específica, puedes utilizar:
Editar código HTML <>
sobre el elemento seleccionado.
Pero en Carruseles debes hacerlo con especial cuidado.
Una etiqueta o Class eliminada puede afectar la interacción.
Utiliza HTML solamente cuando realmente sea necesario
Para:
cambiar imagen;
URL;
Alt;
título;
color;
Padding;
utiliza primero las herramientas visuales.
Code editor
No necesitas abrir el Code editor general para realizar cambios habituales en un Carrusel.
Puede contener:
código más amplio;
scripts;
dependencias;
otras estructuras.
Utilízalo solamente cuando necesites revisar una personalización avanzada.
JavaScript
Un Carrusel puede depender de lógica para desplazarse.
No modifiques JavaScript existente si solamente estás realizando cambios visuales.
Dependencias
Tampoco elimines recursos que no reconoces desde Code editor.
Podrían ser necesarios para el funcionamiento del componente.
Utilizar IA para personalizar un Carrusel
ChatGPT, Claude o Gemini pueden ayudarte.
Por ejemplo:
Estoy trabajando con un Carrusel dentro del Editor de bloques de Waclis.
El Carrusel funciona correctamente y NO quiero modificar su lógica de desplazamiento.
La sección utiliza:
.productos-carousel
Los Slides utilizan:
.producto-slide
Las imágenes utilizan:
.producto-imagen
Necesito:
- que las imágenes se vean completas;
- que no se deformen;
- altura visual de 260 px;
- Border radius de 12 px;
- un Hover muy suave;
- que el CSS no afecte otros Carruseles ni imágenes.
No modifiques HTML.
No agregues JavaScript.
No elimines Classes existentes.
Devuélveme solamente el CSS necesario.
Otra consulta útil
Puedes proporcionar Navigator o HTML y preguntar:
Esta es la estructura de un Slide de mi Carrusel:
[pegar HTML]
Necesito agregar un nuevo Slide manteniendo exactamente la misma estructura.
Indícame qué contenedor debo duplicar.
No cambies ninguna Class existente.
Si la IA propone reconstruir todo
Aclara:
El Carrusel ya funciona. No necesito otro Carrusel. Solo quiero modificar su apariencia.
Esto reduce el riesgo de introducir código innecesario.
Ejemplo práctico: Carrusel de categorías
Queremos:
COMPRA POR CATEGORÍA
← [ Botellas ] [ Mochilas ] [ Tecnología ] →
con más categorías disponibles.
Paso 1
Abre:
Secciones → Carruseles
Paso 2
Elige una composición.
Paso 3
Utiliza Navigator para identificar:
Carousel
→ Track
→ Slide
→ Link
→ Image
Paso 4
Reemplaza cada imagen.
Paso 5
Completa Alt.
Paso 6
Modifica el Heading si existe.
Paso 7
Configura la URL de Link.
Paso 8
Clona Slides completos para agregar categorías.
Paso 9
Elimina los sobrantes.
Paso 10
Ordena las categorías principales primero.
Paso 11
Comprueba imágenes:
Cover o Contain
según el diseño.
Paso 12
Revisa desktop.
Paso 13
Revisa tablet.
Paso 14
Revisa celular.
Paso 15
Guarda.
Paso 16
Utiliza:
Ver página
y recorre todo el Carrusel.
Ejemplo práctico: Carrusel de marcas
MARCAS
← [ Logo ] [ Logo ] [ Logo ] [ Logo ] →
Recomendaciones:
utiliza imágenes transparentes o preparadas para el fondo correspondiente cuando sea posible;
mantén un área visual consistente;
utiliza Contain;
evita deformar;
revisa enlaces si cada logo es clicable.
Ejemplo práctico: Carrusel de servicios
NUESTROS SERVICIOS
←
[ Icono ]
Diseño web
Descripción
[ Ver más ]
→
Cada Slide puede ser una Card.
Mantén:
misma estructura;
textos razonablemente similares;
botones consistentes.
Ejemplo práctico: Carrusel de proyectos
PROYECTOS DESTACADOS
← [ Proyecto 1 ] [ Proyecto 2 ] [ Proyecto 3 ] →
Puedes utilizar:
Cover para fotografías;
título;
enlace hacia proyecto completo.
¿Qué hacer si una imagen no cambia?
Comprueba que seleccionaste:
Image
y no:
Link;
Slide;
Track.
Utiliza Navigator.
¿Qué hacer si cambio la URL pero no la imagen?
Eso es normal si seleccionaste:
Link.
Selecciona Image para cambiar la fotografía.
¿Qué hacer si duplico y aparecen dos imágenes dentro del mismo Slide?
Probablemente clonaste:
Image
en lugar de:
Slide.
Utiliza Deshacer y selecciona la unidad correcta.
¿Qué hacer si desaparece todo el Carrusel al eliminar?
Probablemente seleccionaste:
Track;
Carousel;
en lugar de un Slide.
Utiliza Deshacer.
¿Qué hacer si el Slide nuevo no se desplaza con los demás?
Comprueba Navigator.
Debe encontrarse dentro de la misma estructura del Track.
¿Qué hacer si un Slide cambia de estilo y cambian todos?
Comprueba:
Linked styles
Si todos utilizan la misma Class, puede ser el comportamiento esperado.
¿Qué hacer si quiero destacar solamente uno?
Mantén las Classes comunes y agrega:
Class adicional;
ID único.
¿Qué hacer si los controles no se ven?
Comprueba:
color;
contraste;
posición;
fondo;
si quedaron detrás de otro elemento.
No cambies la lógica antes de revisar el aspecto.
¿Qué hacer si los controles no funcionan?
Comprueba:
Ver página.
Estructura.
Classes.
IDs personalizados.
modificaciones HTML.
scripts si realizaste cambios avanzados.
¿Qué hacer si el Carrusel funciona antes de guardar pero no después?
Comprueba la Página web real con:
Ver página
y revisa especialmente cualquier modificación de:
HTML;
CSS;
Classes;
scripts.
¿Qué hacer si una imagen se recorta?
Decide:
¿quiero mostrarla completa?
Utiliza Contain cuando corresponda.
¿quiero llenar toda la Card?
Utiliza Cover cuando corresponda.
¿Qué hacer si una imagen se deforma?
Revisa:
Width;
Height;
object-fit.
No estires la imagen alterando su proporción.
¿Qué hacer si el Carrusel ocupa demasiado alto en móvil?
Revisa:
altura de imágenes;
textos;
Padding;
tamaño de Cards;
cantidad visible.
No reduzcas demasiado la tipografía para compensarlo.
¿Qué hacer si aparecen demasiados Slides a la vez en móvil?
Revisa el comportamiento responsive del diseño y el ancho de las unidades.
Si requiere CSS avanzado, limita la modificación al Carrusel correspondiente.
¿Qué hacer si el Carrusel genera scroll horizontal en toda la página?
No ocultes globalmente el overflow sin investigar.
Revisa:
Track;
Slides;
Width;
Margin;
Position;
CSS personalizado.
Buenas prácticas para Carruseles
Recomendamos:
utilizar Carruseles cuando el desplazamiento aporte valor;
priorizar los Slides principales;
utilizar Navigator;
distinguir Carousel, Track, Slide, Link e Image;
clonar el Slide completo;
eliminar el Slide completo;
conservar Classes estructurales;
revisar IDs después de clonar estructuras complejas;
utilizar imágenes consistentes;
elegir conscientemente Cover o Contain;
comprobar todas las URLs;
adaptar el contenido a cada dispositivo;
probar controles e interacción;
no modificar JavaScript cuando el Carrusel ya funciona;
limitar CSS a cada Carrusel;
comprobar Ver página.
Errores frecuentes
Confundir Carrusel con Galería
El Carrusel organiza contenido desplazable.
Confundir Carrusel con Slider de imágenes
El Carrusel suele ser más apropiado para recorrer varios elementos o Cards.
Clonar Image en lugar de Slide
Selecciona la unidad completa.
Eliminar Track en lugar de Slide
Comprueba Navigator antes de utilizar la papelera.
Mover solamente el texto o la imagen
Mueve la unidad completa.
Clonar Slides y olvidar URLs
Comprueba todos los Links.
Repetir IDs personalizados
Mantén cada ID único.
Eliminar Classes internas
Puede afectar la interacción.
Utilizar imágenes con proporciones completamente diferentes sin configurarlas
Define Cover o Contain según el objetivo.
Mantener demasiados elementos visibles en celular
Prioriza la legibilidad.
Utilizar Width rígidos que desbordan
Revisa responsive.
Aplicar Height fijo a Cards con textos variables
Puede cortar contenido.
Utilizar Hover para mostrar información indispensable
Recuerda los dispositivos táctiles.
Agregar demasiadas animaciones a una estructura que ya se mueve
Mantén la interfaz controlada.
Modificar JavaScript para cambiar colores o espacios
Utiliza Estilo o CSS.
Agregar otro script de Carrusel cuando el existente ya funciona
Evita duplicar lógica o dependencias.
Aplicar CSS global sobre todos los Carruseles
Identifica cada sección.
No comprobar todos los Slides
Recorre el Carrusel completo.
No probar Ver página
La interacción final debe comprobarse en el frontend.
Flujo recomendado
1. DEFINIR QUÉ CONTENIDO MOSTRAR
↓
2. DECIDIR SI CARRUSEL ES LA SECCIÓN ADECUADA
↓
3. ELEGIR DISEÑO
↓
4. AGREGAR CARRUSEL
↓
5. REVISAR NAVIGATOR
↓
6. IDENTIFICAR TRACK / SLIDE / LINK / IMAGE
↓
7. REEMPLAZAR CONTENIDOS
↓
8. CONFIGURAR LINKS
↓
9. CLONAR / ELIMINAR SLIDES
↓
10. ORDENAR
↓
11. AJUSTAR IMÁGENES
↓
12. PERSONALIZAR ESTILO
↓
13. REVISAR RESPONSIVE
↓
14. PROBAR CONTROLES
↓
15. GUARDAR CAMBIOS
↓
16. VER PÁGINA
Checklist antes de publicar un Carrusel
Elegí Carrusel porque el contenido se beneficia del desplazamiento.
No debería ser una Galería o un Slider.
Identifiqué correctamente Carousel, Track y Slides.
Reemplacé todos los contenidos de ejemplo.
Todas las imágenes son correctas.
Completé los Alt correspondientes.
Elegí correctamente Cover o Contain.
Las imágenes no están deformadas.
Los títulos y textos son correctos.
Todos los Links apuntan al destino correcto.
Revisé Links después de clonar.
Cloné Slides completos.
Eliminé Slides completos.
Los nuevos Slides permanecen dentro del Track.
Los IDs personalizados son únicos.
No eliminé Classes estructurales.
Revisé Linked styles.
Desktop funciona correctamente.
Tablet funciona correctamente.
Celular funciona correctamente.
Los Slides tienen un ancho legible.
Los controles son visibles.
Los controles funcionan.
No existe scroll horizontal inesperado en la página.
Los Hover son moderados.
No agregué JavaScript innecesario.
El CSS personalizado está limitado al Carrusel.
Recorrí todos los Slides.
Probé todos los enlaces.
Probé el resultado mediante Ver página.
En resumen
Los Carruseles permiten organizar diferentes contenidos dentro de una estructura desplazable.
Puedes utilizarlos para:
categorías;
marcas;
productos;
servicios;
proyectos;
promociones;
testimonios;
imágenes.
Una estructura habitual puede pensarse como:
Carousel
└── Track
├── Slide
│ └── contenido
├── Slide
│ └── contenido
└── Slide
└── contenido
En algunos diseños el contenido puede incluir:
Slide
└── Link
└── Image
Por eso, uno de los principios más importantes al trabajar con Carruseles es:
selecciona el nivel correcto antes de clonar, mover o eliminar.
Utiliza Navigator para distinguir:
Carousel → Track → Slide → Link → Image
y recuerda:
Image modifica la fotografía;
Link modifica el destino;
Slide representa la unidad completa;
Track contiene el conjunto;
Carousel representa la estructura general.
También debes revisar:
cantidad de elementos;
imágenes;
Cover o Contain;
enlaces;
responsive;
controles;
comportamiento real.
Si el Carrusel ya funciona correctamente:
conserva su lógica y limita las modificaciones a contenido y diseño.
Después de cada cambio importante:
Guardar Cambios → Ver página → recorrer todo el Carrusel.
De esta manera puedes personalizar composiciones desplazables sin perder la estructura que permite que el componente funcione correctamente.
¿Necesitas más ayuda?
Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.
Soporte por WhatsApp