Examples
Default
Side Padding
Multiple Slides
1 Slide Per Move
No Paging
v4.1.0 or newer is required.
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.
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.
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).