How to use the 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' | Centres 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 colour.
| 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) |
| Licence | MIT for all four | |||
Tools that pair well with the Splide Slider Generator
- 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 colour to get the exact WCAG contrast ratio, pass/fail for every level, an APCA score and one-click fixes that keep your hue.
- Online HTML Editor — A lightweight code playground: edit HTML, CSS and JavaScript side by side, see the result instantly, read console output and download your page as one HTML file.
- CSS Animation Generator — Design CSS animations on a real keyframe timeline.
Frequently asked questions
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.