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.
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();
click
Fired when the user clicks any slide.
Slide | SlideComponent |
---|---|
e | MouseEvent |
move
Fired right before the slider moves.
newIndex | number |
---|---|
prevIndex | number |
destIndex | number |
moved
Fired right after the slider moves.
newIndex | number |
---|---|
prevIndex | number |
destIndex | number |
active
Fired when the active slide is changed.
Slide | SlideComponent |
---|
inactive
Fired when the active slide becomes inactive.
Slide | SlideComponent |
---|
visible
Fired when any slide gets visible in the view port.
Slide | SlideComponent |
---|
hidden
Fired when any slide gets hidden from the view port.
Slide | SlideComponent |
---|
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.
options | Options |
---|
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()
.
prev | HTMLButtonElement |
---|---|
next | HTMLButtonElement |
arrows:updated
Fired whenever status of arrows are updated.
prev | HTMLButtonElement |
---|---|
next | HTMLButtonElement |
prevIndex | number |
nextIndex | number |
pagination:mounted
Fired right after pagination is mounted. You have to register a listener before calling mount()
.
data | PaginationData |
---|---|
item | PaginationItem |
PaginationData
The PaginationData
object contains following properties:
list | HTMLUListElement |
---|---|
items | PaginationItem[] |
PaginationItem
The PaginationItem
object contains following properties:
li | HTMLLIElement |
---|---|
button | HTMLButtonElement |
page | number |
pagination:updated
Fired whenever status of pagination is updated.
data | PaginationData |
---|---|
prev | PaginationItem |
curr | PaginationItem |
navigation:mounted
Fired right after the navigation slider (isNavigation
is true
) is mounted. You have to register a listener before calling mount()
.
splides | Splide[] |
---|
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 |
---|
lazyload:loaded
Fired right after the LazyLoad component loads any image.
img | HTMLImageElement |
---|---|
Slide | SlideComponent |