Events – Splide

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

Listening Events

Use on() method to listen events:

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

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

Event List

mounted: Fired right after all components are mounted.
updated: Fired whenever options are updated.
move: Fired right before a slider moves.
moved: Fired right after a slider moves.
drag: Fired right after a slider moves.
dragged: Fired right after dragging/swiping is finished.
visible: Fired when a slide is made visible on a view port.
hidden: Fired when a slide is made hidden from a view port.
active: Fired when a slide is made active.
inactive: Fired when a slide is made inactive.
arrows:mounted: Fired right after arrows are mounted.
arrows:updated: Fired whenever status of arrows are updated.
pagination:mounted: Fired right after pagination is mounted.
pagination:updated: Fired whenever status of pagination is updated.
navigation:mounted: Fired right after a slider whose isNavigation option is true is mounted.
autoplay:play: Fired when autoplay is started.
autoplay:pause: Fired right after autoplay is paused.
autoplay:playing: Fired while autoplay is active.
lazyload:loaded: Fired right after an image is loaded lazily.

`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).

`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.