Splide is built with some components that mount specific functionalities on it. You can create a component as an extension to alter default behaviors or add new functions.

In this tutorial, all examples are written in ECMAScript 6(ES6). You need to transpile them for browsers.

Component

Creating A Component

Component is a function that returns an object containing public properties and methods. Here is a simple component example:

export default () => {
	return {
		/**
		 * Optional. Called when this component is mounted. 
		 */
		mount() {
			console.log( 'Hello, Splide!' );
		},
		
		/**
		 * Optional. Called after all components are mounted.
		 */
		mounted() {
			// do something.
		},
		
		/**
		 * Optional. Called when Splide is destroyed.
		 */
		destroy() {
			// do something.
		},
	};
}

The mount() is a method that will be called for initialization. At this timing, all built-in components have been already mounted because extensions are done after them. Therefore you may not have chances to use mounted() method in extensions.

Registration

You can register components by mount() method of a Splide instance. The first argument accepts an object which is a collection of components:

import Splide from '@splidejs/splide';
import MyExtension01 from '...';
import MyExtension02 from '...';

new Splide( '#splide' ).mount( {
	MyExtention01,
	MyExtension02,
} );

Be aware that a component name must be unique among all components including ones used internally. Here is a list of built-in components:

  • Options
  • Elements
  • Controller
  • Track
  • Clones
  • Layout
  • Drag
  • Click
  • Autoplay
  • Cover
  • Arrows
  • Pagination
  • LazyLoad
  • Keyboard
  • Sync
  • A11y
  • Breakpoints

Parameters

In a component, 2 important parameters available: Splide and Components.

  • {Object} Splide: Splide instance.
  • {Object} Components: An object containing registered components.

That means you can access all properties and methods of Splide and other built-in components.

export default ( Splide, Components ) => {
	return {
		mount() {
			// Output an active index.
			console.log( Splide.index );
			// Output options.
			console.log( Splide.options );
			// Output all slide elements.
			console.log( Components.Elements.slides );
		},
	}
}

You can also listen to events by using on() method. Be aware that you need to bind this when registering a method as a callback which refers member properties or methods.

export default ( Splide, Components ) => {
	return {
		mount() {
			this.index = 0;
			Splide.on( 'move', this.update.bind( this ) );
		},
		
		update( newIndex ) {
			this.index = newIndex;
		},
	}
}

Example

Let’s try to create a simple component that displays a current slide index and the number of total slides in a “slide/total” format.

Generating An Element

We need to create and insert an element for numbers:

export default ( Splide, Components ) => {
	let elm;
	
	return {
		mount() {
			elm = document.createElement( 'div' );
			elm.style.textAlign = 'center';
			elm.style.marginTop = '0.5em';

			const track = Components.Elements.track;

			// Insert the element after the track.
			track.parentElement.insertBefore( elm, track.nextSibling );
		},
	}
}

The Elements component stores main elements constituting a slider, such as track, list, slides, etc. In the above example, the element for numbers is inserted right after the track element.

Initializing and Updating Numbers

You can get necessary numbers for initialization from:

  • Splide.index: Current index.
  • Splide.length: The total number of slides.

And the 'move' event provides the latest index whenever it’s changed.

export default ( Splide, Components ) => {
	let elm;

	return {
		mount() {
			elm = document.createElement( 'div' );
			elm.style.textAlign = 'center';
			elm.style.marginTop = '0.5em';

			const track = Components.Elements.track;

			// Insert the element after the track.
			track.parentElement.insertBefore( elm, track.nextSibling );

			// Initialize numbers.
			this.setNumber( Splide.index + 1 );
			
			this.bind();
		},

		bind() {
			Splide.on( 'move', newIndex => {
				this.setNumber( newIndex + 1 );
			} );
		},

		setNumber( number ) {
			const content = `${ number }/${ Splide.length }`;

			if ( elm.textContent !== undefined ) {
				elm.textContent = content;
			} else {
				elm.innerText = content;
			}
		},
	};
}

The result will be like this:

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
User's Guide
Tutorials
Extensions