Transition

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

export function MyTransition( Splide, Components ) {
  // Optional
  function mount() {
  }


  // Required
  function start( index, done ) {
  }


  // Required
  function cancel() {
  }


  // Optional
  function destroy() {
  }


  return {
    mount,
    start,
    cancel,
    destroy,
  };
}

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.

`index`	`number`	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

import Splide from '@splidejs/splide';
import { MyTransition } from '...';


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

Example

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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

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,
  };
}

The result will be like this: