Cómo usar: Generador de Carruseles
- Elige una librería (Swiper, Splide, Glide.js o Slick) y el contenido de los slides: paneles de demostración, tus propias URLs de imágenes o tarjetas.
- Define los slides por vista para escritorio, tableta y móvil, el espacio entre ellos, el efecto, el bucle, el autoplay, las flechas y la paginación.
- Revisa la vista previa en vivo con anchos de escritorio, tableta y móvil.
- Copia el HTML, CSS y JavaScript (CDN o npm) o descarga una página HTML completa.
Genera sliders sin memorizar opciones
Cada librería de carruseles tiene decenas de opciones con nombres distintos: el slidesPerView de Swiper es el perPage de Splide, el perView de Glide y el slidesToShow de Slick. Este generador te ofrece un único conjunto de controles y escribe la configuración correcta para la librería que elijas, incluidos los breakpoints responsive, que cada una define de forma diferente (Swiper usa min-width con enfoque mobile-first, Splide y Glide usan max-width con enfoque desktop-first, y Slick un array responsive).
¿Qué librería de slider deberías usar?
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Tamaño (min + gzip, JS) | ~40 KB (bundle) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Dependencias | Ninguna | Ninguna | Ninguna | jQuery |
| Efectos | Slide, fade, cube, coverflow, flip, cards, creative | Slide, fade | Slide | Slide, fade |
| Vertical | Sí | Sí | No | Sí |
| Accesibilidad | Buena (módulo a11y) | Excelente (ARIA por defecto) | Básica | Básica |
| Mantenimiento | Sí | Sí | Lento | No (última versión en 2017) |
| Licencia | MIT en las cuatro | |||
Swiper es la opción más popular y más completa: úsala salvo que necesites algo muy ligero. Splide es más ligera y tiene la mejor accesibilidad desde el primer momento. Glide.js es la más pequeña para carruseles sencillos. Slick sigue siendo habitual en sitios antiguos y temas de WordPress, pero depende de jQuery y ya no se mantiene, así que elígela solo para encajar con un proyecto existente.
Consejos de rendimiento y accesibilidad
- Carga con lazy-load las imágenes que no estén en el primer slide (el atributo
loading="lazy"se añade por ti) y ajusta su tamaño al ancho del slide. Te ayudan el redimensionador de imágenes y el compresor. - Evita el autoplay en contenido importante; si lo usas, mantén activado pausar al pasar el ratón y un retardo de al menos 4 segundos.
- Mantén activadas las flechas y la paginación para que las personas que usan teclado o lector de pantalla puedan navegar.
- Los carruseles en la primera pantalla pueden perjudicar el Largest Contentful Paint: asegúrate de que la primera imagen no tenga lazy-load si es tu elemento LCP.
Guías específicas por librería: Swiper, Splide, Glide.js y Slick. En Webflow, pega el HTML en un elemento Embed y el script antes de </body>.
También se busca como: generador de sliders, generador de código slider, slider responsive, crear carrusel html, carrusel javascript, generador carrusel imágenes, slider html css javascript.
Herramientas que combinan con: Generador de Carruseles
- Editor HTML en línea — Un playground de código ligero: edita HTML, CSS y JavaScript lado a lado, mira el resultado al instante, revisa la salida de la consola y descarga tu página como un único archivo HTML.
- Generador de Gradientes CSS — Diseña un degradado visualmente: arrastra las paradas de color, cambia el ángulo o el tipo, parte de un preajuste y copia CSS listo para producción con un color de respaldo sólido.
- Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.
- Generador de Keyframes CSS — Un editor visual para @keyframes.
Preguntas frecuentes
¿Cuál es la mejor librería de slider?
¿Puedo usar el código en WordPress o Webflow?
</body>.