Cómo usar: Generador de Slick Slider
- Elige las opciones de tu slider Slick y el contenido de las diapositivas: paneles de demo, tus propias URLs de imágenes o tarjetas.
- Define las diapositivas visibles para escritorio, tableta y móvil, la separación, 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.
Acerca de Slick
Slick (“el último carrusel que necesitarás”) fue durante años el carrusel jQuery por defecto y todavía está integrado en muchos temas de WordPress, tiendas Shopify y sitios antiguos. Admite puntos de quiebre responsive, modo centrado, fade, deslizamiento vertical, carga diferida y autoplay. Su última versión (1.8.1) es de 2017 y requiere jQuery.
Opciones de Slick
| Opción | Significado |
|---|---|
slidesToShow / slidesToScroll | Diapositivas visibles y cuántas avanzan por clic |
responsive | Array de { breakpoint, settings }; cada uno se aplica por debajo del ancho del punto de quiebre |
infinite | Repite las diapositivas en bucle |
autoplay, autoplaySpeed | Reproducción automática y retardo |
fade | Fundido cruzado (una diapositiva a la vez) |
centerMode | Centra la diapositiva activa con vecinas parcialmente visibles |
Separación entre diapositivas
Slick no tiene una opción de separación. El CSS generado añade un margen horizontal a .slick-slide y un margen negativo a .slick-list para que los bordes exteriores sigan alineados.
¿Sigues necesitando Slick?
Para un sitio existente que ya carga jQuery y Slick, mantenerlo es razonable. Para algo nuevo, Swiper o Splide son más ligeros, siguen mantenidos, son más accesibles y no necesitan jQuery. Cambia la biblioteca de arriba y el generador convierte tus ajustes.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Tamaño (mín. + gzip, JS) | ~40 KB (paquete) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Dependencias | Ninguna | Ninguna | Ninguna | jQuery |
| Efectos | Deslizar, fundido, cubo, coverflow, volteo, tarjetas, creativos | Deslizar, fundido | Deslizar | Deslizar, fundido |
| 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 para las cuatro | |||
También se busca como: slick slider, carrusel slick, ejemplo slick slider, slick responsive, slick autoplay, carrusel jquery, slick cdn, generador carrusel slick.
Herramientas que combinan con: Generador de Slick Slider
- Generador de Carruseles — Configura un carrusel con clics en lugar de leer la documentación: elige una librería, define breakpoints, efectos y controles, mira la vista previa en vivo y copia el HTML, CSS y JavaScript listos para producción.
- Generador de Swiper — Configura Swiper 11 con un editor visual (breakpoints responsivos, efectos, autoplay, tipos de paginación y más) y copia HTML, CSS y JavaScript listos para usar.
- Generador de Splide Slider — Crea un carrusel Splide accesible y ligero sin leer la documentación: define las opciones, revisa la vista previa en tres tamaños de pantalla y copia el código.
- 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.
Preguntas frecuentes
¿Slick necesita jQuery?
¿Cómo añado espacio entre las diapositivas de Slick?
.slick-slide y un margen negativo equivalente en .slick-list; el generador lo escribe a partir del valor de separación.