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

ready

Fired right after the mounted event, but the state has been changed to IDLE.


click

Fired when the user clicks any slide.

SlideSlideComponent

A clicked Slide component

eMouseEvent

A MouseEvent object


move

Fired right before the carousel moves.

newIndexnumber

A new slide index

prevIndexnumber

A previous slide index

destIndexnumber

A destination slide index. In the loop mode, the index can be negative or greater than the number of slides for clones.


moved

Fired right after the carousel moves.

newIndexnumber

A new slide index

prevIndexnumber

A previous slide index

destIndexnumber

A destination slide index. In the loop mode, the index can be negative or greater than the number of slides for clones.


active

Fired when the active slide is changed.

SlideSlideComponent

The Slide component that becomes active.


inactive

Fired when the active slide becomes inactive.

SlideSlideComponent

The Slide component that becomes inactive.


visible

Fired when any slide gets visible in the view port.

SlideSlideComponent

The Slide component that becomes visible.


hidden

Fired when any slide gets hidden from the view port.

SlideSlideComponent

The Slide component that becomes hidden.


refresh

Fired when Splide refreshes the carousel.


updated

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

optionsOptions

An object with the latest options.


resize

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


resized

Fired whenever Splide completes resizing the carousel.


drag

Fired when the user starts dragging the carousel.


dragging

Fired while the user is dragging the carousel.


dragged

Fired right after the user finishes dragging the carousel.


scroll

Fired right before Splide scrolls the carousel 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 carousel by the Scroll component. This event is not fired for the normal CSS transition. Use the moved event instead.


overflow

Fired when total width of slides gets wider/narrower than the list element by resizing the viewport. See this page for more details.


destroy

Fired when Splide destroys the carousel.


arrows:mounted

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

prevHTMLButtonElement

A previous arrow.

nextHTMLButtonElement

A next arrow.


arrows:updated

Fired whenever status of arrows are updated.

prevHTMLButtonElement

A previous arrow.

nextHTMLButtonElement

A next arrow.

prevIndexnumber

An old index.

nextIndexnumber

A new index.


pagination:mounted

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

dataPaginationData

An object with pagination data.

itemPaginationItem

Data of the active item.

PaginationData

The PaginationData object contains following properties:

listHTMLUListElement

An UL element that contains pagination items.

itemsPaginationItem[]

An array with PaginationItem objects.

PaginationItem

The PaginationItem object contains following properties:

liHTMLLIElement

A list item element.

buttonHTMLButtonElement

A button element for a dot.

pagenumber

A page index.


pagination:updated

Fired whenever status of pagination is updated.

dataPaginationData

An object with pagination data.

prevPaginationItem

Data of the previous item.

currPaginationItem

Data of the current item.


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

splidesSplide[]

An array with Splide instances to navigate.


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

Indicates the current progress rate by 0-1.


lazyload:loaded

Fired right after the LazyLoad component loads any image.

imgHTMLImageElement

A loaded image element.

SlideSlideComponent

A Slide component that contains the loaded image element.