Transition is a special component that ought to be used only for handling a slide transition. You can create your custom Transition component to change default transition animations.

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

Built-in Transitions

There are 2 built-in Transition components:

FadeActivated when the type option is 'fade'. Slides are changed with a fade transition.
SlideActivated when the type option is not 'fade'. Slides are changed with a typical slide transition.

Transition Component

Creating A Transition Component

Before creating a Transition component, you need to have knowledge about an extension component.

Because a Transition component is also a component, it can be created in a similar way:

export default ( Splide, Components ) => {
	return {
		/**
		 * Optional. Called when the component is mounted.
		 */
		mount() {
		},

		/**
		 * Required. Called just before the transition starts.
		 */
		start( destIndex, newIndex, prevIndex, coord, done ) {
		},
		
		/**
		 * Optional. Called when Splide is destroyed.
		 */
		destroy() {
		},
	};
}

The start() appearing in the example above is a mandatory method automatically called to start a transition by the Track component.

  • {number} destIndex: Destination slide index. In “loop” mode, this index can be negative or greater than the number of slides for clones.
  • {number} newIndex: New slide index.
  • {number} prevIndex: Previous slide index.
  • {Object} coord: An object containing x and y position. x will be 0 in the TTB mode and y will be 0 in LTR and RTL mode.
  • {function} done: A callback function must be called after a transition is completed.

For example, source code of the Slide transition component is like this:

import { applyStyle } from '../../utils/dom';
import { SLIDE } from "../../constants/types";

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

	return {
		mount() {
			list = Components.Elements.list;

			Splide.on( 'transitionend', e => {
				if ( e.target === list && endCallback ) {
					endCallback();
				}
			}, list );
		},
		
		start( destIndex, newIndex, prevIndex, coord, done ) {
			const options   = Splide.options;
			const edgeIndex = Components.Controller.edgeIndex;
			let speed       = options.speed;
			endCallback = done;

			if ( Splide.is( SLIDE ) ) {
				if ( ( prevIndex === 0 && newIndex >= edgeIndex ) || ( prevIndex >= edgeIndex && newIndex === 0 ) ) {
					speed = options.rewindSpeed || speed;
				}
			}

			applyStyle( list, {
				transition: `transform ${ speed }ms ${ options.easing }`,
				transform : `translate(${ coord.x }px,${ coord.y }px)`,
			} );
		},
	};
}

A slide transition effect is made with CSS transition and transform properties. By observing the transitionend native event, notify that a transition is completed by triggering done callback.

Registration

Transition component is registered by mount() method of a Splide instance. While Extensions are passed to the first argument as an object, a Transition must be passed to the second argument as a function.

import Splide from '@splidejs/splide';
import Extension from '...';
import Transition from '...';

new Splide( '#splide' ).mount( { Extension }, Transition );
User's Guide
Tutorials
Extensions
Integration