Events

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

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


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

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.
`ready`	Fired right after the `mounted` event.
`click`	Fired when the user clicks any slide.
`move`	Fired right before the carousel moves.
`moved`	Fired right after the carousel moves.
`active`	Fired when the active slide is changed.
`inactive`	Fired when the active slide becomes inactive.
`visible`	Fired when any slide gets visible in the view port.
`hidden`	Fired when any slide gets hidden from the view port.
`refresh`	Fired when Splide refreshes the carousel.
`updated`	Fired whenever options are updated.
`resize`	Fired whenever the window is resized.
`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.
`scrolled`	Fired right after Splide finishes scrolling the carousel.
`overflow`	Fired when total width of slides gets wider/narrower than the list element.
`destroy`	Fired when Splide destroys the carousel.
`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 the navigation carousel is mounted.
`autoplay:play`	Fired when autoplay starts.
`autoplay:pause`	Fired right after autoplay is paused.
`autoplay:playing`	Fired while the timer for autoplay is ticking.
`lazyload:loaded`	Fired right after the LazyLoad component loads any image.

`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

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();

`ready`

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

`click`

Fired when the user clicks any slide.

`Slide`	`SlideComponent`	A clicked Slide component
`e`	`MouseEvent`	A `MouseEvent` object

`move`

Fired right before the carousel moves.

`newIndex`	`number`	A new slide index
`prevIndex`	`number`	A previous slide index
`destIndex`	`number`	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.

`newIndex`	`number`	A new slide index
`prevIndex`	`number`	A previous slide index
`destIndex`	`number`	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.

`Slide`	`SlideComponent`	The Slide component that becomes active.

`inactive`

Fired when the active slide becomes inactive.

`Slide`	`SlideComponent`	The Slide component that becomes inactive.

`visible`

Fired when any slide gets visible in the view port.

`Slide`	`SlideComponent`	The Slide component that becomes visible.

`hidden`

Fired when any slide gets hidden from the view port.

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

`options`	`Options`	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().

`prev`	`HTMLButtonElement`	A previous arrow.
`next`	`HTMLButtonElement`	A next arrow.

`arrows:updated`

Fired whenever status of arrows are updated.

`prev`	`HTMLButtonElement`	A previous arrow.
`next`	`HTMLButtonElement`	A next arrow.
`prevIndex`	`number`	An old index.
`nextIndex`	`number`	A new index.

`pagination:mounted`

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

`data`	`PaginationData`	An object with pagination data.
`item`	`PaginationItem`	Data of the active item.

`PaginationData`

The PaginationData object contains following properties:

`list`	`HTMLUListElement`	An UL element that contains pagination items.
`items`	`PaginationItem[]`	An array with PaginationItem objects.

`PaginationItem`

The PaginationItem object contains following properties:

`li`	`HTMLLIElement`	A list item element.
`button`	`HTMLButtonElement`	A button element for a dot.
`page`	`number`	A page index.

`pagination:updated`

Fired whenever status of pagination is updated.

`data`	`PaginationData`	An object with pagination data.
`prev`	`PaginationItem`	Data of the previous item.
`curr`	`PaginationItem`	Data of the current item.

`navigation:mounted`

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

`splides`	`Splide[]`	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.

`rate`	`number`	Indicates the current progress rate by 0-1.

`lazyload:loaded`

Fired right after the LazyLoad component loads any image.

`img`	`HTMLImageElement`	A loaded image element.
`Slide`	`SlideComponent`	A Slide component that contains the loaded image element.