<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 written in TypeScript.<br>
No dependencies, no Lighthouse errors.
</p>

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

<p>
  <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/version3/">About v3</a>
</p>
</div>

## Features

- Written in TypeScript
- No dependencies
- Lightweight, 26kB (11kB gzipped)
- Flexible and extensible
- Protected by 300+ test cases
- Multiple slides
- Slide or fade transition by CSS
- Supports breakpoints
- Accepts CSS relative units
- No need to crop images
- Autoplay with progress bar and play/pause buttons
- 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
- 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. © 2021 Naotoshi Fujita
