Splide - The Lightweight, Flexible And Accessible Slider/carousel

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