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.

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.
User's Guide
Tutorials
Extensions