# @splidejs/splide

> Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.

Latest version **4.1.4** (published 2022-11-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @splidejs/splide
pnpm add @splidejs/splide
yarn add @splidejs/splide
bun add @splidejs/splide
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.1.4 |
| Published | 2022-11-09 |
| First published | 2019-07-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5365 |
| Author | Naotoshi Fujita |
| Maintainers | splidejs |
| Keywords | splide, slider, carousel, slideshow, gallery, lightweight, touch, responsive, typescript |

## Links

- npm: https://www.npmjs.com/package/@splidejs/splide
- Repository: https://github.com/Splidejs/splide
- Homepage: https://splidejs.com/
- Issues: https://github.com/Splidejs/splide/issues
- npm.io page: https://npm.io/package/@splidejs/splide

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 4.1.4 (latest) — 2022-11-09
- 4.1.3 — 2022-09-30
- 4.1.2 — 2022-09-21
- 4.1.1 — 2022-09-20
- 4.1.0 — 2022-09-20
- 4.0.17 — 2022-09-06
- 4.0.16 — 2022-09-06
- 4.0.15 — 2022-09-04
- 4.0.13 — 2022-09-03
- 4.0.12 — 2022-09-03
- 4.0.11 — 2022-09-03
- 4.0.8 — 2022-09-02
- 4.0.7 — 2022-06-11
- 4.0.6 — 2022-05-28
- 4.0.5 — 2022-05-28
- … 135 more at https://npm.io/package/@splidejs/splide/versions

## 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>

[![](https://data.jsdelivr.com/v1/package/npm/@splidejs/splide/badge?v=1)](https://www.jsdelivr.com/package/npm/@splidejs/splide)

<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! 
- [GitHub Sponsors](https://github.com/sponsors/NaotoshiFujita)

## 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](https://splidejs.com):

<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

---
_Source: https://npm.io/package/@splidejs/splide · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._