Cómo usar: Generador de Splide Slider
- Elige las opciones de tu slider Splide y el contenido de las diapositivas: paneles de demo, tus propias URLs de imágenes o tarjetas.
- Define las diapositivas visibles para escritorio, tablet y móvil, el espacio, el efecto, el bucle, el autoplay, las flechas y la paginación.
- Revisa la vista previa en vivo en anchos de escritorio, tablet y móvil.
- Copia el HTML, CSS y JavaScript (CDN o npm), o descarga una página HTML completa.
Acerca de Splide
Splide es un slider sin dependencias de unos 12 KB (min + gzip) que destaca por su accesibilidad: añade automáticamente roles ARIA, etiquetas, regiones en vivo y soporte de teclado, siguiendo el patrón de carrusel WAI-ARIA. Admite los modos bucle y fade, autoplay con botón de pausa/reproducción, carga diferida, sliders verticales y extensiones como auto-scroll y vídeo.
Opciones que genera el generador
| Opción | Significado |
|---|---|
type | slide, loop o fade (fade muestra una sola diapositiva; usa rewind para repetirla en bucle) |
perPage, gap | Diapositivas por página y el espacio como longitud CSS |
breakpoints | Primero escritorio: 1023: { perPage: 2 } se aplica hasta 1023 px |
autoplay, interval, pauseOnHover | Reproducción automática |
focus: 'center' | Centra la diapositiva activa |
direction: 'ttb' + height | Slider vertical (se requiere una altura fija) |
drag: 'free' | Modo de desplazamiento libre con inercia |
Estilos en Splide
Importa splide.min.css (o el CSS base para un control total) y después sobrescribe .splide__arrow y .splide__pagination__page.is-active; el CSS generado hace esto con tu color de acento.
| 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 para las cuatro | |||
También se busca como: splide js, splide slider, carrusel splide, splide breakpoints, splide autoplay, splide cdn, carrusel accesible, generador splide.
Herramientas que combinan con: Generador de Splide 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 Glide.js — Crea un carrusel Glide.js mínimo — el slider de unos 7 KB, sin dependencias — con breakpoints responsive, flechas y puntos, y copia el código.
- Comprobador de contraste — Introduce un color de texto y de fondo para obtener el ratio de contraste WCAG exacto, si cumple cada nivel, una puntuación APCA y correcciones de un clic que mantienen tu tono.
Preguntas frecuentes
¿Por qué fade muestra solo una diapositiva en Splide?
El tipo fade siempre muestra una diapositiva por página. Usa el tipo slide o loop para mostrar varias diapositivas.
¿Los breakpoints de Splide son min-width o max-width?
Por defecto son max-width (primero escritorio). Define
mediaQuery: 'min' para cambiar a primero móvil.¿Splide es accesible?
Sí: aplica atributos ARIA, navegación por teclado y anuncios para lectores de pantalla por defecto, que es su principal ventaja.
¿Puedo instalar Generador de Splide Slider como aplicación web y utilizarla sin conexión?
Sí. Generador de Splide Slider es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.