Discover / Design
Splide
by splidejsTypeScript
Lightweight, dependency-free carousel and slider.
Repositoryslowing
Maturity: slowing because no commit in 25 months. Derived from release and commit history, not a rating.
- Stars
- 5.4k
- Forks
- 445
- Downloads / mo
- —
- Last commit
- 2024-07-08
- License
- MIT
- Open issues
- 143
Market and trust evidence
Edition not yet matchedNo exact skills.sh identity match is available for this repository. Repository adoption and freshness remain visible above; install momentum is not inferred.
Trust analysis is a screening signal, not a security warranty. Read the ranking and trust methodology.
In practice
Written by AI from this repository’s README · medium confidenceCarousel libraries pull in dependencies and often damage Lighthouse accessibility and best practice scores.
Use it when
When you need a lightweight, accessible carousel with breakpoints, autoplay and drag support in any framework.
Not the right pick when
Extras such as auto scroll, grid and video are separate extensions, so the core alone does not cover them.
Capabilities
- no dependencies and roughly 29kB, 12kB gzipped
- breakpoints, CSS relative units, RTL and vertical direction
- mouse drag, touch swipe and free drag mode
- autoplay with progress bar and play pause toggle
- lazy loading, thumbnail slider and nested sliders
- accessibility friendly with Live Region support
Cost: Free and open source
Install
Derived from the published package name in the repository, not from a model.
Video walkthroughs
splide.js tutorial - how to make multi slider, carousel easily in 3 steps using splide js framework.
How to Use Splide Slider For Your Website | Splide Slider Tutorial
Third-party YouTube uploads matched to this tool by title, channel and repository name on 2026-08-03. Not made, reviewed or endorsed by SkillPilot. View counts and publish months are as of the match date and the month is approximate. Nothing loads from YouTube until you press play.
What the repository ships
CI configured
Detected from the actual files in the repository root.
Latest release v4.1.3
Published 2022-09-24
Bug Fix 🐛
- Make Splide work with elements that come from other realms, such as an iframe (#931).
Tags
README
<div align="center">
<a href="https://splidejs.com">
<img alt="Splide" src="./images/logo.svg" width="70">
</a>
<h1>Splide</h1>
<p>
Splide is a lightweight, flexible and accessible slider and carousel.<br>
No dependencies, no Lighthouse errors.
</p>
<p>
<a href="https://github.com/Splidejs/splide/releases/latest">Download</a>
<br>
<a href="https://splidejs.com/guides/getting-started/">Getting Started</a>
<br>
<a href="https://splidejs.com/">Demo</a>
<br>
<a href="https://splidejs.com/documents/">Documents</a>
<br>
<a href="https://splidejs.com/guides/themes/">Themes</a>
<br>
<a href="https://splidejs.com/guides/version4/">About v4</a>
<br>
<a href="https://github.com/Splidejs/splide/discussions">Discussions/Q&A</a>
</p>
<h3>
Ready For
</h3>
<p>
<a href="https://splidejs.com/guides/getting-started/">
<img alt="React Splide" src="./images/javascript-logo.svg" width="30">
</a>
<a href="https://splidejs.com/guides/getting-started/">
<img alt="React Splide" src="./images/typescript-logo.svg" width="30">
</a>
<a href="https://splidejs.com/integration/react-splide/">
<img alt="React Splide" src="./images/react-logo.svg" width="30">
</a>
<a href="https://splidejs.com/integration/vue-splide/">
<img alt="Vue Splide" src="./images/vue-logo.svg" width="30">
</a>
<a href="https://splidejs.com/integration/svelte-splide/">
<img alt="Vue Splide" src="./images/svelte-logo.svg" width="30">
</a>
</p>
<h3>
Extensions
</h3>
<p>
<a href="https://splidejs.com/extensions/auto-scroll/">Auto Scroll</a> ・
<a href="https://splidejs.com/extensions/intersection/">Intersection</a> ・
<a href="https://splidejs.com/extensions/grid/">Grid</a> ・
<a href="https://splidejs.com/extensions/video/">Video</a> ・
<a href="https://splidejs.com/extensions/url-hash/">URL Hash</a>
</p>
<h3>
Translation
</h3>
<p>
<a href="https://ja.splidejs.com">日本語</a>
</p>
</div>
Support Splide
Please support the project if you like it!
Features
- Written in TypeScript
- No dependencies
- Lightweight, 29kB (12kB gzipped)
- Flexible and extensible
- Protected by 400+ test cases
- Multiple slides
- Slide or fade transition by CSS
- Supports breakpoints
- Accepts CSS relative units
- Autoplay with progress bar and a play-pause toggle button
- RTL and vertical direction
- Mouse drag and touch swipe
- Free drag mode
- Mouse wheel navigation
- Nested slider
- Lazy loading
- Thumbnail slider
- Auto width and height
- Accessibility friendly
- Live Region
- Internet Explorer 10
No Lighthouse Errors
Here is the mobile version result of the Splide front page:
<img alt="Lighthouse result of the Splide frontpage" src="./images/lighthouse-mobile.png" width="500">
The Splide slider does not degrade Accessibility, Best Practices and SEO 🎉
License
Splide is released under MIT license. © 2022 Naotoshi Fujita