Events

You're browsing the documentation for v3

Listening to Events

Use the Splide#on() method to listen to events.

var splide = new Splide( '.splide' ).mount();
splide.on( 'move', function () {
// do something
} );
JavaScript

Be aware that Splide removes all handlers on destroy. If you are using the destroy option for breakpoints, you have to detect remount and register handlers again by creating your own extension.

Event List

mounted

Fired right after all components are mounted. To listen to this event, you have to register the 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();
JavaScript

click

Fired when the user clicks any slide.

SlideSlideComponent
eMouseEvent

move

Fired right before the slider moves.

newIndexnumber
prevIndexnumber
destIndexnumber

moved

Fired right after the slider moves.

newIndexnumber
prevIndexnumber
destIndexnumber

active

Fired when the active slide is changed.

SlideSlideComponent

inactive

Fired when the active slide becomes inactive.

SlideSlideComponent

visible

Fired when any slide gets visible in the view port.

SlideSlideComponent

hidden

Fired when any slide gets hidden from the view port.

SlideSlideComponent

refresh

Fired when Splide refreshes the slider.


updated

Fired whenever options are updated. For instance, when any breakpoint hits the window size, this event will be fired.

optionsOptions

resize

Fired whenever the window is resized. Splide reduces the frequency by requestAnimationFrame.


resized

Fired whenever Splide completes resizing the slider.


drag

Fired when the user starts dragging the slider.


dragging

Fired while the user is dragging the slider.


dragged

Fired right after the user finishes dragging the slider.


scroll

Fired right before Splide scrolls the slider by the Scroll component. This event is not fired for the normal CSS transition. Use the move event instead.


scrolled

Fired right after Splide finishes scrolling the slider by the Scroll component. This event is not fired for the normal CSS transition. Use the moved event instead.


destroy

Fired when Splide destroys the slider.


arrows:mounted

Fired right after arrows are mounted. You have to register a listener before calling mount().

prevHTMLButtonElement
nextHTMLButtonElement

arrows:updated

Fired whenever status of arrows are updated.

prevHTMLButtonElement
nextHTMLButtonElement
prevIndexnumber
nextIndexnumber

pagination:mounted

Fired right after pagination is mounted. You have to register a listener before calling mount().

dataPaginationData
itemPaginationItem

PaginationData

The PaginationData object contains following properties:

listHTMLUListElement
itemsPaginationItem[]

PaginationItem

The PaginationItem object contains following properties:

liHTMLLIElement
buttonHTMLButtonElement
pagenumber

pagination:updated

Fired whenever status of pagination is updated.

dataPaginationData
prevPaginationItem
currPaginationItem

Fired right after the navigation slider (isNavigation is true) is mounted. You have to register a listener before calling mount().

splidesSplide[]

autoplay:play

Fired when autoplay starts.


autoplay:pause

Fired right after autoplay is paused.


autoplay:playing

Fired while the timer for autoplay is ticking.

ratenumber

lazyload:loaded

Fired right after the LazyLoad component loads any image.

imgHTMLImageElement
SlideSlideComponent