Prueba el editor, sin registrarte
Elige una plantilla, personalízala y mira cómo se actualiza en vivo, sin registrarte. El editor está en inglés por ahora.
Sin tarjeta de crédito · Plan gratis para siempre
Sin tarjeta de crédito · Plan gratis para siempre
El widget Slider de imágenes de Common Ninja es un widget insertable, gratis y sin código, que muestra varias imágenes en una secuencia deslizante fluida en tu sitio web.
Sube imágenes directamente o pega URL de un CDN, elige un diseño, configura la reproducción automática y el tiempo de cada diapositiva, elige un efecto al pasar el mouse (zoom, desvanecido, capa de color), elige un estilo (skin) o agrega CSS personalizado, pon enlaces en cada diapositiva y pega una línea de código de inserción en Canva, Hostinger, Notion, Carrd, Google Sites, Webflow, WordPress y más de 200 plataformas adicionales.
Úsalo para mostrar productos, banners principales, portafolios de fotografía, galerías de eventos o imágenes de marketing en un espacio fijo que mantiene la página compacta y la atención donde tú quieres.
La sección principal, una galería de productos, un portafolio de fotografía, el resumen de un evento. El slider pasa por las imágenes en un solo marco, así la página se mantiene compacta sin obligar a bajar por cinco secciones principales seguidas. Mantén limpio el punto focal y deja que las imágenes roten.
El zoom, el desvanecido, la capa de color, el paso de blanco y negro a color y otros efectos al pasar el mouse hacen que el slider responda al visitante sin hacer más pesada la página. Combina el efecto con un enlace en cada diapositiva y el slider se vuelve un espacio de conversión con mucha interacción, no solo decoración.
Cada diapositiva puede tener su propia URL, así que un slider de 5 imágenes se convierte en 5 llamadas a la acción distintas: lleva las diapositivas de productos a sus páginas de producto, los adelantos del blog a sus artículos y las fotos del portafolio a sus casos de éxito. El slider deja de ser un elemento pasivo y empieza a generar clics.
Un slider de antes y después compara dos imágenes con un divisor que se arrastra. Los visitantes lo deslizan a la izquierda y a la derecha para ver la diferencia. Un slider de imágenes muestra varias imágenes distintas, una tras otra. Usa este Slider de imágenes para galerías, banners principales que rotan y vitrinas de productos, y usa el widget Before & After Slider de Common Ninja cuando lo que quieres mostrar es la comparación.
Sube imágenes desde tu computadora o pega URL de un CDN, de tu biblioteca de medios o de cualquier sitio público. Agrega a cada diapositiva su propio título, texto alternativo y enlace, para que cada imagen sume para el SEO y pueda llevar a los visitantes al producto, la historia o la landing page que le corresponde.
Elige un diseño de diapositiva (banner principal a todo lo ancho, tarjeta contenida, franja tipo banner), configura la reproducción automática al cargar o al pasar el mouse, define el tiempo por diapositiva, activa los gestos de deslizar, elige un efecto al pasar el mouse (zoom, desvanecido, capa de color) y el estilo de las flechas y la paginación. Usa un estilo (skin) de la biblioteca de diseños o agrega CSS personalizado para ajustarlo a tu marca hasta el último píxel.
Copia la línea de código de inserción y pégala en Canva, Hostinger, Notion, Carrd, Google Sites o en cualquiera de las más de 200 plataformas compatibles. Los cambios que hagas en el editor de Common Ninja se aplican en todos los lugares donde lo insertaste, sin volver a pegar el código. Cambia una imagen, reordena las diapositivas o elige otro estilo, y la página publicada se actualiza.
Banner principal a todo lo ancho, tarjeta contenida, franja tipo banner, paneo y zoom estilo Ken Burns, transición solo con desvanecido. Cambia de diseño en el editor sin volver a subir las imágenes. Cada diseño se reacomoda de forma adaptable a los tamaños de pantalla de móvil, tablet y escritorio.
Aplica zoom, desvanecido, capa de color o paso de blanco y negro a color al pasar el mouse. Los efectos se activan al pasar el mouse en escritorio y al tocar en móvil, así el slider sigue siendo interactivo, ya sea con mouse o con el dedo, sin afectar el uso táctil.
Define una URL propia para cada imagen. Cada diapositiva se vuelve una llamada a la acción independiente: páginas de producto, landing pages, entradas de blog, casos de éxito. Combínalo con efectos al pasar el mouse y el slider también funciona como un menú visual, hecho a tu medida, que lleva a tus secciones con más interacción.
Elige de una biblioteca de estilos prediseñados (minimalista, revista, oscuro, cinematográfico) para adaptarlo rápido a tu marca. Agrega CSS personalizado para controlar al píxel la forma de las flechas, los puntos de paginación, el espacio entre diapositivas, los detalles del efecto al pasar el mouse y la tipografía de los pies de foto.
El widget Slider de imágenes te deja elegir entre efectos de color para darles a tus imágenes un estilo más uniforme y ese efecto “wow”.
Ajusta los colores, las fuentes, el espaciado, la velocidad de transición y los controles de flechas y puntos para que combinen con tu sitio. Ves los cambios en vista previa en vivo mientras los haces, así que puedes probar varias opciones antes de decidirte. Nada de esto requiere programar.
El slider toma el ancho de su contenedor y se adapta desde una pantalla de celular de 320 px hasta un banner principal de escritorio a todo lo ancho. Las imágenes se ajustan al espacio en vez de recortarse de forma impredecible, y en móviles se desliza con el dedo, mientras que en escritorio también hay flechas.
Además de los controles integrados, puedes agregar tu propio CSS al slider de imágenes para que coincida con tu marca al píxel. Cambia la tipografía, el espaciado y el estilo de las flechas y los puntos, o escribe reglas nuevas desde cero. Es útil cuando un sistema de diseño necesita valores exactos y no ajustes predefinidos aproximados.
Copia una línea de código y pégala donde quieras que aparezca el slider en el HTML de tu página. El slider se actualiza automáticamente cada vez que lo cambias en el editor, así que nunca tienes que volver a insertarlo. Funciona en cualquier plataforma que acepte HTML personalizado.
El widget Slider de imágenes tiene efectos al pasar el mouse que agregan una capa adicional de efectos visuales y hacen todavía más agradable la experiencia de los usuarios en tus páginas.
El widget Slider de imágenes tiene dos estilos de diseño: carrusel y cuadrícula. Puedes elegir entre ellos para que el widget combine con el diseño de tu sitio web.
Si pones enlaces en las imágenes, el slider de imágenes se vuelve una poderosa herramienta de conversión.
El widget Slider de imágenes es fácil de usar y no requiere saber programar. Nuestro panel intuitivo, con función de arrastrar y soltar, te permite personalizar el widget como quieras con solo unos cuantos clics sencillos.
Saca más provecho de tus imágenes
Abrir el editorSin tarjeta de crédito · Configuración en menos de 5 minutos
Common Ninja tiene widgets sin código increíbles que embellecerían cualquier sitio web, sin importar con qué creador de sitios esté hecho. Es muy fácil de usar y de personalizar. Tiene widgets para casi cualquiera que quiera que su sitio web impresione.
Traducido del inglés
Un servicio sobresaliente. Uso sus widgets para apoyarme en mi negocio de diseño web y, siempre que necesito ayuda, me ayudan muy rápido.
Traducido del inglés
¡¡¡Excelente empresa con excelente servicio!!! Lo usamos para crear una encuesta y fue muy fácil de usar. El servicio fue perfecto. Amit nos ayudó con cada problema y cada pregunta que tuvimos, ¡¡¡muchas gracias!!!
Traducido del inglés
Common Ninja nos salvó cuando estábamos creando nuestro sitio web, y la atención al cliente que nos dio Daniel, el cofundador y CEO, fue increíble.
Traducido del inglés
Sí. El plan gratuito incluye un widget Slider de imágenes sin límite de tiempo y sin tarjeta de crédito. Mejora tu plan solo cuando necesites más widgets, más diapositivas por slider, estilos (skins) premium, efectos avanzados al pasar el mouse o funciones como la visibilidad condicional de diapositivas y el seguimiento de analíticas por diapositiva.
Agrega tantas diapositivas como permita tu plan: el plan gratuito cubre una cantidad razonable y los planes de pago suben el límite. Cada diapositiva puede tener su propia imagen, título, texto alternativo, pie de foto y URL en la que se puede hacer clic. Reordena las diapositivas arrastrando y soltando en el editor, y el widget publicado se actualiza sin volver a pegar el código.
Un Before & After Slider compara dos imágenes en un solo marco con un divisor que se arrastra. Los visitantes lo deslizan para ver la diferencia. Un slider de imágenes muestra varias imágenes distintas, una tras otra. Usa este Slider de imágenes para galerías, banners principales que rotan y vitrinas de productos, y usa el widget Before & After Slider de Common Ninja cuando lo que quieres mostrar es la comparación (remodelaciones, rediseños, retoque fotográfico, fitness, etc.).
Sí. Define una URL propia para cada imagen en el editor: una página de producto, una landing page, una entrada de blog o cualquier lugar dentro o fuera de tu sitio. Toda la diapositiva funciona como enlace, así que un slider de 5 imágenes se convierte en 5 llamadas a la acción distintas sin necesidad de poner botones en cada imagen.
Zoom (la imagen se agranda al pasar el mouse), desvanecido (la imagen se oscurece para mostrar el pie de foto), capa de color (un tono configurable) y paso de blanco y negro a color. Los efectos respetan el comportamiento táctil en móviles. Toca una vez para activar el efecto y otra vez para abrir el enlace.
Crea el widget en el editor de Common Ninja (sube las imágenes, elige el diseño, personaliza el estilo), copia el código de inserción o la URL y pégalo en tu sitio: en Canva, con la app “Embed” del panel “Apps” del editor; en Notion, con “/embed” y la URL de inserción; en Carrd, con un elemento “Embed” en la sección donde debe aparecer el slider. Los cambios que hagas en el editor llegan a cada inserción sin volver a pegar el código.
No. Las imágenes se cargan de forma diferida. El slider solo precarga la diapositiva visible y la siguiente, no toda la secuencia. Las imágenes originales se sirven desde un CDN con elección automática de formato WebP y AVIF, así que las Core Web Vitals se mantienen en buen nivel incluso con imágenes principales grandes. También puedes ajustar la calidad y el tamaño de las imágenes en el editor para cuidar el consumo de datos móviles.
Sí. Los diseños se adaptan a los tamaños de pantalla de móvil, tablet y escritorio. El tamaño de las diapositivas se ajusta al ancho de la pantalla, en pantallas táctiles se desliza con el dedo en lugar de usar las flechas, y los puntos de paginación cambian de tamaño para que se puedan tocar fácilmente. En móviles, los efectos al pasar el mouse se activan al tocar, así el slider sigue siendo interactivo sin romper el uso táctil.
Elige tu plataforma. Cada una toma menos de 4 minutos.
Muestra imágenes que rotan o se deslizan
Muestra videos en un carrusel que rota o se desliza.
Un slider sencillo para comparar imágenes de antes y después y ver los cambios con claridad.
Muestra imágenes y textos en distintos diseños y cuadrículas para presentar varias imágenes de forma atractiva.
Crea popups atractivos y personalizados para aumentar tus conversiones.
Muestra las publicaciones más recientes de tu cuenta de Instagram.
Sí, puedes. Ve a la pestaña “Display Rules” y elige los disparadores que quieras. Puedes conocer más sobre los distintos disparadores y reglas en la sección “Display Rules & Triggers” del centro de ayuda (en inglés): https://help.commoninja.com/hc/en-us/sections/6900365183517-Display-Rules-Triggers
Sí, lo puedes hacer fácilmente desde la pestaña “Templates”.
Sí, hay muchos estilos (skins) bonitos para elegir. Así ahorras tiempo y empiezas a usar el widget lo antes posible.
Sí, puedes subir una imagen o elegir un ícono de una gran selección de íconos disponibles para agregar a tu slider de imágenes, o bien dejarlo todo en blanco.
Es muy sencillo. Solo tienes que registrarte y empezar a usar la versión gratuita.
El widget Slider de imágenes de Common Ninja es gratis. Sin embargo, tiene un límite de vistas.
El widget Slider de imágenes de Common Ninja es compatible con TODOS los creadores de sitios web actuales y futuros.
Sí, el widget Slider de imágenes cumple con el RGPD.
No. Usar nuestro widget Slider de imágenes es muy sencillo. El widget tiene una interfaz intuitiva de arrastrar y soltar y opciones totalmente personalizables. Cuando termines de editar el widget a tu gusto, solo tienes que copiar el código que te damos y agregarlo a tu sitio web.
Claro. Nos encantará conocer tu sugerencia. Visita nuestra página de sugerencias de funciones (en inglés).
Un slider de imágenes es un elemento de interfaz gráfica que permite a los usuarios recorrer deslizando una serie de imágenes o gráficos. Se usa mucho en sitios web, presentaciones multimedia y aplicaciones móviles para mostrar una colección de imágenes. El slider suele incluir botones de navegación para pasar de una imagen a otra de forma manual, o puede cambiar de imagen automáticamente cada cierto tiempo. Los sliders de imágenes son una forma eficaz de presentar una serie de imágenes de manera atractiva e interesante, y son un elemento popular en el diseño web moderno.
Muestra tus imágenes una tras otra en un marco fijo, con reproducción automática, efectos al pasar el mouse, enlaces en cada diapositiva, varios diseños, estilos atractivos y CSS personalizado. Insértalo en más de 200 plataformas, como Canva, Hostinger, Notion, Carrd, Google Sites y Webflow.
Crea tu slider de imágenesSin tarjeta de crédito · Configuración en menos de 5 minutos
