Cómo usar: Splide Slider Generator
- Pick options for your Splide slider and the slide content: demo panels, your own image URLs or cards.
- Set slides per view for desktop, tablet and mobile, the gap, effect, loop, autoplay, arrows and pagination.
- Check the live preview at desktop, tablet and mobile widths.
- Copy the HTML, CSS and JavaScript (CDN or npm), or download a complete HTML page.
About Splide
Splide is a dependency-free slider of about 12 KB (min + gzip) known for its accessibility: it adds ARIA roles, labels, live regions and keyboard support automatically, following the WAI-ARIA carousel pattern. It supports loop and fade modes, autoplay with a play/pause button, lazy loading, vertical sliders and extensions such as auto-scroll and video.
Options written by the generator
| Option | Meaning |
|---|---|
type | slide, loop or fade (fade shows one slide; use rewind to loop it) |
perPage, gap | Slides per page and the gap as a CSS length |
breakpoints | Desktop-first: 1023: { perPage: 2 } applies up to 1023 px |
autoplay, interval, pauseOnHover | Automatic playback |
focus: 'center' | Centers the active slide |
direction: 'ttb' + height | Vertical slider (a fixed height is required) |
drag: 'free' | Free-scrolling momentum mode |
Styling Splide
Import splide.min.css (or the core CSS for full control), then override .splide__arrow and .splide__pagination__page.is-active — the generated CSS does this with your accent color.
| Swiper | Splide | Glide.js | Slick | |
|---|---|---|---|---|
| Size (min + gzip, JS) | ~40 KB (bundle) | ~12 KB | ~7 KB | ~12 KB + jQuery ~30 KB |
| Dependencies | None | None | None | jQuery |
| Effects | Slide, fade, cube, coverflow, flip, cards, creative | Slide, fade | Slide | Slide, fade |
| Vertical | Yes | Yes | No | Yes |
| Accessibility | Good (a11y module) | Excellent (ARIA by default) | Basic | Basic |
| Maintained | Yes | Yes | Slowly | No (last release 2017) |
| License | MIT for all four | |||
También se busca como: splide js, splide slider, splide carousel, splide breakpoints, splide autoplay, splide cdn, accessible carousel.
Herramientas que combinan con: Splide Slider Generator
- Slider & Carousel Generator — Configure a carousel with clicks instead of reading docs: choose a library, set breakpoints, effects and controls, watch the live preview and copy production-ready HTML, CSS and JavaScript.
- Swiper Slider Generator — Configure Swiper 11 with a visual editor — responsive breakpoints, effects, autoplay, pagination types and more — and copy ready-to-use HTML, CSS and JavaScript.
- Glide.js Slider Generator — Create a minimal Glide.js carousel — the ~7 KB, dependency-free slider — with responsive breakpoints, arrows and bullets, and copy the code.
- Contrast Checker — Enter a text and background color to get the exact WCAG contrast ratio, pass/fail for every level, an APCA score and one-click fixes that keep your hue.
Preguntas frecuentes
Why does Splide fade show only one slide?
The fade type always shows one slide per page. Use the slide or loop type for multiple slides.
Are Splide breakpoints min-width or max-width?
Max-width by default (desktop-first). Set
mediaQuery: 'min' to switch to mobile-first.Is Splide accessible?
Yes — it applies ARIA attributes, keyboard navigation and screen-reader announcements by default, which is its main advantage.
¿Puedo instalar Splide Slider Generator como aplicación web y utilizarla sin conexión?
Sí. Splide Slider Generator 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.