Demo

Default

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
new Splide( '#splide' ).mount();

Side Padding

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
new Splide( '#splide', {
	type   : 'loop',
	padding: {
		right: '5rem',
		left : '5rem',
	},
} ).mount();

Multiple Slides

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
new Splide( '#splide', {
	perPage: 3,
	rewind : true,
} ).mount();

1 Slide Per Move

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
new Splide( '#splide', {
	type   : 'loop',
	perPage: 3,
	perMove: 1,
} ).mount();

Focus Center

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
new Splide( '#splide', {
	type   : 'loop'
	perPage: 3,
	focus  : 'center',
} ).mount();

Auto Width

Each slide width is determined by its element width itself. See this document for more details.

  • 150
  • 250
  • 200
  • 225
  • 175
  • 150
  • 225
  • 200
  • 275
new Splide( '#splide', {
	type     : 'loop'
	height   : '9rem',
	autoWidth: true,
	focus    : 'center',
} ).mount();

Autoplay

A progress bar or play/pause buttons can be displayed by adding extra HTML code. See this document for more information.

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
new Splide( '#splide', {
	type    : 'loop'
	perPage : 3,
	autoplay: true,
} ).mount();
  • Autoplay is paused as default when the slider is hovered or internal elements are focused.

Fade Transition

  • Sample Image 01
  • Sample Image 02
  • Sample Image 03
  • Sample Image 04
  • Sample Image 05
new Splide( '#splide', {
	type  : 'fade',
	rewind: true,
} ).mount();
  • Fade transition doesn't support multiple slides.

Vertical Slider

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
new Splide( '#splide', {
	direction: 'ttb',
	height   : '10rem',
} ).mount();
  • "height" or "heightRatio" must be provided for TTB mode to determine the slider height.

Right to Left

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
new Splide( '#splide', {
	direction: 'rtl',
	perPage  : 3,
} ).mount();

Nested Slider

  • 01
    • 01
    • 02
    • 03
    • 04
    • 05
    • 06
    • 07
    • 08
    • 09
new Splide( '#splide', {
	height: '12rem',
} ).mount();

new Splide( '#nested-splide', {
	type   : 'loop',
	width  : '85%',
	height : '8rem',
	perPage: 3,
	drag   : false,
} ).mount();

Breakpoints

Most of options can be updated according to window width. Change window size to verify how it works. Visit here for more details.

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
new Splide( '#splide', {
	perPage: 3,
	breakpoints: {
		'640': {
			perPage: 2,
			gap    : '1rem',
		},
		'480': {
			perPage: 1,
			gap    : '1rem',
		},
	}
} ).mount();

Add/Remove

Add or remove slides dynamically.

  • 01
var splide = new Splide( '#splide', {
	perPage: 3,
	rewind : true,
} ).mount();

var addButton    = document.querySelector( '.js-add-button' );
var removeButton = document.querySelector( '.js-remove-button' );

addButton.addEventListener( 'click', function() {
	splide.add( '<li class="splide__slide">' + ( splide.length + 1 ) + '</li>' );
} );

removeButton.addEventListener( 'click', function() {
	splide.remove( splide.length - 1 );
} );

Cover Images

Convert images to "background-image" of their wrapper element. No need to crop images manually by a photo editor.

  • Sample Image 01
  • Sample Image 02
  • Sample Image 03
  • Sample Image 04
  • Sample Image 05
  • Sample Image 06
  • Sample Image 07
  • Sample Image 08
  • Sample Image 09
new Splide( '#splide', {
	perPage    : 3,
	height     : '10rem',
	cover      : true,
	breakpoints: {
		height: '6rem',
	}
} ).mount();
  • "height", "heightRatio" or "fixedHeight" must be provided to cover the wrapper element.

Lazy Load

Lazy Load defers loading images to reduce initial loading time and memory/bandwidth consumption. Use a browser development tool to check how it works.

  • Sample Image 01
  • Sample Image 02
  • Sample Image 03
  • Sample Image 04
  • Sample Image 05
  • Sample Image 06
  • Sample Image 07
  • Sample Image 08
new Splide( '#splide', {
	perPage : 2,
	cover   : true,
	height  : '12rem',
	lazyLoad: 'nearby',
	breakpoints: {
		height: '8rem',
	}
} ).mount();

Thumbnails

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

  • Sample Image 01
  • Sample Image 02
  • Sample Image 03
  • Sample Image 04
  • Sample Image 05
  • Sample Image 06
  • Sample Image 07
  • Sample Image 08
  • Sample Image 09
  • Sample Image 01
  • Sample Image 02
  • Sample Image 03
  • Sample Image 04
  • Sample Image 05
  • Sample Image 06
  • Sample Image 07
  • Sample Image 08
  • Sample Image 09
// Create and mount the thumbnails slider.
var secondarySlider = new Splide( '#secondary-slider', {
	rewind      : true,
	fixedWidth  : 100,
	fixedHeight : 64,
	isNavigation: true,
	gap         : 10,
	focus       : 'center',
	pagination  : false,
	cover       : true,
	breakpoints : {
		'600': {
			fixedWidth  : 66,
			fixedHeight : 40,
		}
	}
} ).mount();

// Create the main slider.
var primarySlider = new Splide( '#primary-slider', {
	type       : 'fade',
	heightRatio: 0.5,
	pagination : false,
	arrows     : false,
	cover      : true,
} );

// Set the thumbnails slider as a sync target and then call mount.
primarySlider.sync( secondarySlider ).mount();

Video*

You can assign HTML video, YouTube or Vimeo to slides(Video extension is required).

import Splide from '@splidejs/splide';
import Video from '@splidejs/splide-extension-video';

new Splide( '#splide', {
	heightRatio: 0.5625,
	cover      : true,
	lazyLoad   : 'sequential',
	video      : {
		loop: true,
	},
} ).mount( { Video } );

Grid*

Create rows and cols in a slider(Grid is required). Multiple dimensions are accepted as a following example.

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
import Splide from '@splidejs/splide';
import Grid from '@splidejs/splide-extension-grid';

new Splide( '#splide', {
	type       : 'loop',
	height     : '14rem',
	perPage    : 2,
	perMove    : 1,
	grid       : {
		// You can define rows/cols instead of dimensions.
		dimensions: [ [ 1, 1 ], [ 2, 2 ], [ 2, 1 ], [ 1, 2 ], [ 2, 2 ], [ 3, 2 ] ],
		gap: [
			row: '6px',
			col: '6px',
		],
	},
	breakpoints: {
		600: {
			height : '8rem',
			perPage: 1,
			grid   : {
				dimensions: [ [ 2, 2 ], [ 1, 1 ], [ 2, 1 ], [ 1, 2 ], [ 2, 2 ] ],
			}
		}
	}
} ).mount( { Grid } );

URL Hash Navigation*

A slider can correspond with URL hash change(URL hash extension is required). Move the slider and verify URL on your browser.

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
import Splide from '@splidejs/splide';
import URLHash from '@splidejs/splide-extension-url-hash';

new Splide( '#splide', {
	perPage    : 3,
	perMove    : 1,
	height     : '9rem',
	focus      : 'center',
	trimSpace  : false,
	breakpoints: {
		600: {
			perPage: 2,
			height : '6rem',
		}
	}
} ).mount( { URLHash } );

About Splide

Splide is a simple and lightwight(less than 29kB) slider meeting various demands, even thumbnails, nested slider o vertical direction. I know there are a lot of slider libraries in the world and they are incredibly awesome, but I decided to create my own slider to match my demanding needs, inspired by slickSwiper and Glide.

  • Pure JavaScript without any dependencies
  • Small size, less than 29kB(11kB gzipped)
  • Flexible and extensible
  • Multiple slides
  • Slide or fade transition by CSS
  • Responsive, supporting breakpoints
  • Accepting CSS relative units, such as vw, %, rem, etc.
  • No need to crop images
  • Autoplay with progress bar and play/pause buttons
  • "Right to left" and vertical direction
  • Mouse drag and touch swipe
  • Nested slider
  • Lazy loading
  • Thumbnail slider
  • Accessibility friendly, supporting keyboard control and ARIA attributes
  • Internet Explorer 10

Learn More

Options

Splide accepts many options to customize its behavior. They can be also modified by using a data attribute.

View Options Document

Turorials

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

View Tutorials Document

APIs

Splide provides some APIs and events that make it easy to control a slider programmatically as you like.

Vies APIs Document

Extension

Want to add more functionalities to a slider? Let’s start creating your own component.

View Extension Docment