Transition Component

The Transition component is a special component that changes slides by a transition effects. Splide has 2 built in Transition components, "fade" and "slide".

Creating A Transition

This guide assumes that you have the knowledge of Extension.

You can create a Transition component in the same way as an extension. The only difference between them is the Transition component requires the start() and cancel() methods.

export function MyTransition( Splide, Components ) {
// Optional
function mount() {
}
// Required
function start( index, done ) {
}
// Required
function cancel() {
}
// Optional
function destroy() {
}
return {
mount,
start,
cancel,
destroy,
};
}
JavaScript

The Move core component calls the start() method for moving the carousel. The Transition component is supposed to move the carousel to the specified index, and call the done callback after the transition ends.

indexnumber

A destination index.

done() => void

A function that must be called after the transition ends.

The cancel() method will be called when the transition is interrupted for some reasons. For example, the user may start dragging the carousel while transitioning if the waitForTransition option is false.

Registration

To register the created Transition component, pass it to the Splide#mount() method as the 2nd argument:

import Splide from '@splidejs/splide';
import { MyTransition } from '...';
new Splide( '#splide' ).mount( {}, MyTransition );
JavaScript

Example

Here is a small example that moves the carousel by using the CSS transition:

import { EventInterface } from '@splidejs/splide';
export function MyTransition( Splide, Components ) {
const { bind } = EventInterface( Splide );
const { Move } = Components;
const { list } = Components.Elements;
let endCallback;
function mount() {
bind( list, 'transitionend', e => {
if ( e.target === list && endCallback ) {
// Removes the transition property
cancel();
// Calls the `done` callback
endCallback();
}
} );
}
function start( index, done ) {
// Converts the index to the position
const destination = Move.toPosition( index, true );
// Applies the CSS transition
list.style.transition = 'transform 800ms cubic-bezier(.44,.65,.07,1.01)';
// Moves the carousel to the destination.
Move.translate( destination );
// Keeps the callback to invoke later.
endCallback = done;
}
function cancel() {
list.style.transition = '';
}
return {
mount,
start,
cancel,
};
}
JavaScript

The result will be like this:

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