Splide

Splide is a lightweight, flexible and accessible slider and 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

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

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

Focus Center

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

Drag Free

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

Custom Pagination

  • 01
  • 02
  • 03
  • 04
  • 05

Slider Progress

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

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

Mouse Wheel

The waitForTransition option must be true.

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

Auto Width/Height

Each slide width is determined by its element width itself.

  • 225
  • 150
  • 180
  • 250
  • 200
  • 225
  • 150
  • 180
  • 250

Autoplay

You can add the progress bar and play/pause buttons by providing the extra HTML.

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

Fade Transition

The fade transition does not support multiple slides.

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

Right to Left

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

Nested Slider

    • 01
    • 02
    • 03
    • 04
    • 05
    • 06
  • 02
  • 03

Breakpoints

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

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

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.

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

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.

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

Thumbnails

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

  • Sample Slide 01
  • Sample Slide 02
  • Sample Slide 03
  • Sample Slide 04
  • Sample Slide 05
  • Sample Slide 06
  • Sample Slide 07
  • Sample Slide 08
  • Sample Slide 09
  • Sample Thumbnail 01
  • Sample Thumbnail 02
  • Sample Thumbnail 03
  • Sample Thumbnail 04
  • Sample Thumbnail 05
  • Sample Thumbnail 06
  • Sample Thumbnail 07
  • Sample Thumbnail 08
  • Sample Thumbnail 09

Video*

The Video extension assigns HTML, YouTube and Vimeo videos to slides (Video extension is required).

  • Sample Video 01
  • Sample Video 02
  • Sample Video 03
  • Sample Video 04

Grid*

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

  • 16
  • 17
  • 18
  • 19
  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 01
  • 02
  • 03
  • 04

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

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

About Splide

Splide is a flexible, lightweight (26kB) 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.

Here is a summary of features:

  • Written in TypeScript
  • Requires 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 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