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
move
Fired right before a slider moves.
Parameters
moved
Fired right after a slider moves.
Parameters
drag
Fired when dragging/swiping is started.
Parameters
dragged
Fired right after dragging/swiping is finished.
Parameters
visible
Fired when a slide is made visible on a view port.
Parameters
hidden
Fired when a slide is made hidden from a view port.
Parameters
active
Fired when a slide is made active.
Parameters
inactive
Fired when a slide is made inactive.
Parameters
click
Fired when a slide is clicked.
Parameters
arrows:mounted
Fired right after arrows are mounted.
Parameters
arrows:updated
Fired whenever status of arrows are updated.
Parameters
pagination:mounted
Fired right after pagination is mounted.
Parameters
pagination:updated
Fired whenever the pagination status is updated.
Parameters
navigation:mounted
Fired right after a slider whose isNavigation
option is true
is mounted.
Parameters
autoplay:play
Fired when autoplay is started.
autoplay:pause
Fired right after autoplay is paused.
autoplay:playing
Fired while autoplay is active.
Parameters
lazyload:loaded
Fired right after an image is loaded lazily.