Splide

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

Examples

Default

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

Side Padding

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

Multiple Slides

1 Slide Per Move

Focus Center

Drag Free

Custom Pagination

Slider Progress

Vertical Slider

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

Mouse Wheel

The waitForTransition option must be true.

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

Cover Image

Splide can set the image source inside each slide to the wrapper element as a background image. No need to crop images by an image editor.

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).

About Splide

Splide is a flexible, lightweight (27kB) 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, 27kB (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 by the keyboard control and ARIA attributes
  • 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