Events

Splide provides a lot of events that help you to run your custom code at a specific moment.

Listening to Events

Use on() method to listen to events:

var splide = new Splide( '#splide' ).mount();

splide.on( 'move', function() {
	// do something
} );

Be aware that listening to some events and using destroy breakpoints option are not compatible in most cases because all registered handlers will be removed by “destroy”. If you want to do both, you need to detect “remount” and register the handler again by creating your own component(extension). The mount() method in the component is always called whenever the Splide is initialized.

Event List

mounted

Fired right after all components are mounted. To subscribe this event, you must register a handler before calling mount().

var splide = new Splide( '#splide' ).mount();

splide.on( 'mounted', function () {
	// This won't be executed.
} );


var splide = new Splide( '#splide' );

splide.on( 'mounted', function () {
	// This will be executed.
} );

splide.mount();

updated

Fired whenever options are updated.

Parameters

• {Object} options: Updated options.

move

Fired right before a slider moves.

Parameters

• {number} newIndex: New slide index.
• {number} oldIndex: Old slide index.
• {number} destIndex: Destination slide index. In “loop” mode, this index can be negative or greater than the number of slides for cloned slides.

moved

Fired right after a slider moves.

Parameters

• {number} newIndex: New slide index.
• {number} oldIndex: Old slide index.
• {number} destIndex: Destination slide index. In “loop” mode, this index can be negative or greater than the number of slides for cloned slides.

drag

Fired when dragging/swiping is started.

Parameters

• {Object} info: An object containing data related with dragging.

dragged

Fired right after dragging/swiping is finished.

Parameters

• {Object} info: An object containing data related with dragging.

visible

Fired when a slide is made visible on a view port.

Parameters

• {Object} Slide: A Slide object(not Element).

hidden

Fired when a slide is made hidden from a view port.

Parameters

• {Object} Slide: A Slide object(not Element).

active

Fired when a slide is made active.

Parameters

• {Object} Slide: A Slide object(not Element).

inactive

Fired when a slide is made inactive.

Parameters

• {Object} Slide: A Slide object(not Element).

click

Fired when a slide is clicked.

Parameters

• {Object} Slide: A Slide object(not Element).

arrows:mounted

Fired right after arrows are mounted.

Parameters

• {Element} prev: Previous arrow element.
• {Element} next: Next arrow element.

arrows:updated

Fired whenever status of arrows are updated.

Parameters

• {Element} prev: Previous arrow element.
• {Element} next: Next arrow element.
• {number} prevIndex: New previous index.
• {number} nextIndex: New next index.

pagination:mounted

Fired right after pagination is mounted.

Parameters

• {Object} data: An object containing a wrapper element and all item objects.
• {Element} activeItem: Active item object including li(list element), button(button element), page(page index), Slides(Slide objects related with the item).

pagination:updated

Fired whenever status of pagination is updated.

Parameters

• {Object} data: An object containing a wrapper element and all item objects.
• {Element} prevItem: Previous active item object.
• {Element} activeItem: Current active item object.

navigation:mounted

Fired right after a slider whose isNavigation option is true is mounted.

Parameters

• {Splide} splide: A Splide instance where this slider syncs.

autoplay:play

Fired when autoplay is started.

autoplay:pause

Fired right after autoplay is paused.

autoplay:playing

Fired while autoplay is active.

Parameters

• {number} rate: Describe progress until next slide change by rate(0-1).

lazyload:loaded

Fired right after an image is loaded lazily.

Parameters

• {Element} img: Loaded img element.