Comment utiliser : 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 | |||
Aussi recherché comme : splide js, splide slider, splide carousel, splide breakpoints, splide autoplay, splide cdn, accessible carousel.
Outils complémentaires : 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.
Questions fréquentes
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.
Puis-je installer Splide Slider Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. Splide Slider Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.