Page Inspect

Splide - The lightweight, flexible and accessible slider/carousel

- Home
- Documents
- Premium

日本語

# Splide

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

DownloadGet Started

Splide v4 has been released!

Released!

## Splide Premium

Enrich your next project with impressive transition effects by Splide and WebGL (three.js).

Available in the sponsor-only repository!

More Examples

## Examples

### Default

- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09

CodePreview

### Side Padding

- 08
- 09
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 01
- 02

CodePreview

### Multiple Slides

### 1 Slide Per Move

- 04
- 05
- 06
- 07
- 08
- 09
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 01
- 02
- 03
- 04
- 05
- 06

CodePreview

### No Paging

v4.1.0 or newer is required.

- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09

CodePreview

### Focus Center

### Drag Free

### Drag Free Snap

### Custom Pagination

### Carousel Progress

### Vertical Slider

The vertical slider requires the `height` or `heightRatio` option to determine the slider height.

- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09

CodePreview

### Mouse Wheel

You'll need to set `waitForTransition` to `true` or provide the `wheelSleep` duration.

### Auto Width/Height

Each slide width is determined by its element width itself.

### Autoplay

You can add the progress bar and play/pause buttons by providing the extra HTML. Also, you can enable autoplay only when the slider is in the viewport by using the Intersection extension.

### Fade Transition

The fade transition does not support multiple slides.

### Right to Left

### Nested Slider

### Breakpoints

You can update some options by the media query. Change the window size to see how it works.

### Add/Remove

You can dynamically add/remove slides via API.

- 01

CodePreview

### Lazy Load

Lazy Load defers loading images to reduce initial loading time and memory/bandwidth consumption. Check your browser development tool to see how it works.

### Thumbnails

Splide sliders can be synchronized with one another. By utilizing this, you can make a gallery with thumbnails navigation.

### Auto Scroll\*

The AutoScroll extension continuously scrolls the slider (AutoScroll extension is required). This is compatible with the Intersection extension.

### Video\*

The Video extension assigns HTML, YouTube and Vimeo videos to slides (Video extension is required). This is compatible with the Intersection extension.

### Grid\*

The Grid extension creates rows and cols in a slider (Grid extension is required).

### URL Hash Navigation\*

The URL Hash extension enables to sync the slider with the URL hash, and update the hash when the active slide changes (URL Hash extension is required).

Version 4

- Version 4
- Version 3 (Archives)

Release Notes

### User's Guide

- About Version 4
- Getting Started
- Themes
- Options
- Structure
- Arrows
- Pagination
- Autoplay
- Auto Width
- Accessibility
- i18n
- Overflow
- APIs
- Events
- Extension
- Transition

### Tutorials

- Image Carousel
- Thumbnail Carousel
- Gallery
- Carousel Progress

### Extensions

- Auto Scroll
- Intersection
- Video
- Grid
- URL Hash Navigation

### Integration

- React Splide
- Vue Splide
- Svelte Splide

### Components

- Arrows
- Autoplay
- Controller
- Direction
- Drag
- Elements
- Layout
- Move
- Pagination
- Scroll
- Slide
- Slides

## About Splide

Splide is a flexible, lightweight and accessible slider written in TypeScript. It helps you to create various kinds of sliders by just changing options, such as multiple slides, thumbnails, nested sliders, vertical direction and more. Also, you can enhance the slider capability by using APIs or building extensions.

- Written in TypeScript
- Requires 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
- 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
- Live region
- Internet Explorer 10

## Learn More

### Options

Splide takes a lot of options that make it very flexible. Easy to get the slider you want in a minute.

View Options

### Tutorials

Tutorial documents help you to create a complex slider, such as a slider with thumbnail control.

View Tutorials

### APIs

Splide provides some APIs and events that enable you to control the slider by script.

View APIs

### Extension

Want to add more features to the slider? Let’s start creating your extension.

View Extension

- Home
- Documents
- Premium
- GitHub

Splide is released under the MIT license.

© 2022 Naotoshi Fujita