APIs
APIs
Class Properties
defaults
defaults: Options
Splide
.
defaults
=
{
type
:
'loop'
,
perPage
:
3
,
}
;
JavaScript
Splide.defaults = { type : 'loop', perPage: 3, };
STATES
STATES: Record<string, number>
CREATED |
---|
MOUNTED |
IDLE |
MOVING |
DESTROYED |
const
splide
=
new
Splide
(
'.splide'
)
;
if
(
splide
.
state
.
is
(
Splide
.
STATES
.
IDLE
)
)
{
// do something
}
JavaScript
const splide = new Splide( '.splide' ); if ( splide.state.is( Splide.STATES.IDLE ) ) { // do something }
Instance Properties
root
readonly root: HTMLElement
event
readonly event: EventInterfaceObject
The EventInterfaceObject
object. You don't have to access this property.
Use on()
, off()
or emit()
.
Components
readonly Components: Components
const
splide
=
new
Splide
(
'.splide'
)
;
splide
.
mount
(
)
;
const
{
Autoplay
}
=
splide
.
Components
;
Autoplay
.
pause
(
)
;
JavaScript
const splide = new Splide( '.splide' ); splide.mount(); const { Autoplay } = splide.Components; Autoplay.pause();
state
readonly state: StateObject
The StateObject
object. See STATES.
splides
readonly splides: SyncTarget[]
An array with data of splide instances to sync with (^3.3.1). Each element has the following properties:
splide | Splide |
---|---|
isParent | boolean | undefined |
options
options: Options
get |
---|
set |
You can change only responsive options by passing an object.
const
splide
=
new
Splide
(
'.splide'
)
.
mount
(
)
;
splide
.
options
=
{
perPage
:
4
,
}
;
JavaScript
const splide = new Splide( '.splide' ).mount(); splide.options = { perPage: 4, };
Neither change other readonly options, nor directly set a value to each property. That may break the carousel.
// Don't change the type because the option is not responsive
splide
.
options
=
{
type
:
'fade'
}
;
// Don't directly set a value
splide
.
options
.
perPage
=
4
;
JavaScript
// Don't change the type because the option is not responsive splide.options = { type: 'fade' }; // Don't directly set a value splide.options.perPage = 4;
length
length: number
get |
---|
index
index: number
get |
---|
Instance Methods
mount
mount( Extensions?: Record<string, ComponentConstructor>, Transition?: ComponentConstructor ): this
Params
Extensions |
---|
Transition |
sync
sync( splide: Splide ): this
Syncs the carousel with the provided one.
This method must be called before mount()
.
const
primary
=
new
Splide
(
'#primary'
)
;
const
secondary
=
new
Splide
(
'#secondary'
)
;
primary
.
sync
(
secondary
)
;
primary
.
mount
(
)
;
secondary
.
mount
(
)
;
JavaScript
const primary = new Splide( '#primary' ); const secondary = new Splide( '#secondary' ); primary.sync( secondary ); primary.mount(); secondary.mount();
Params
splide |
---|
go
go( control: number | string ): this
i |
---|
'+${i}' |
'-${i}' |
'>' |
'<' |
'>${i}' |
In most cases, '>'
and '<'
notations are enough to control the carousel
because they respect perPage
and perMove
options.
const
splide
=
new
Splide
(
'.splide'
)
;
splide
.
mount
(
)
;
// Goes to the slide 1:
splide
.
go
(
1
)
;
// Increments the index:
splide
.
go
(
'+2'
)
;
// Goes to the next page:
splide
.
go
(
'>'
)
;
// Goes to the page 2:
splide
.
go
(
'>2'
)
;
JavaScript
const splide = new Splide( '.splide' ); splide.mount(); // Goes to the slide 1: splide.go( 1 ); // Increments the index: splide.go( '+2' ); // Goes to the next page: splide.go( '>' ); // Goes to the page 2: splide.go( '>2' );
Params
control |
---|
on
on( events: string | string[], callback: AnyFunction ): this
const
splide
=
new
Splide
(
)
;
// Listens to a single event:
splide
.
on
(
'move'
,
(
)
=>
{
}
)
;
// Listens to multiple events:
splide
.
on
(
'move resize'
,
(
)
=>
{
}
)
;
// Appends a namespace:
splide
.
on
(
'move.myNamespace resize.myNamespace'
,
(
)
=>
{
}
)
;
JavaScript
const splide = new Splide(); // Listens to a single event: splide.on( 'move', () => {} ); // Listens to multiple events: splide.on( 'move resize', () => {} ); // Appends a namespace: splide.on( 'move.myNamespace resize.myNamespace', () => {} );
Params
events |
---|
callback |
off
off( events: string | string[] ): this
const
splide
=
new
Splide
(
'.splide'
)
;
// Removes all handlers assigned to "move":
splide
.
off
(
'move'
)
;
// Only removes handlers that belong to the specified namespace:
splide
.
off
(
'move.myNamespace'
)
;
JavaScript
const splide = new Splide( '.splide' ); // Removes all handlers assigned to "move": splide.off( 'move' ); // Only removes handlers that belong to the specified namespace: splide.off( 'move.myNamespace' );
Params
events |
---|
emit
emit( event: string, ...args: any[] ): this
Params
event |
---|
args |
add
add( slides: string | HTMLElement | Array<string | HTMLElement>, index?: number ): this
const
splide
=
new
Splide
(
'.splide'
)
;
splide
.
mount
(
)
;
// Adds a slide by HTML:
splide
.
add
(
'<li class="splide__slide"></li>'
)
;
// or adds an element:
const
slide
=
document
.
createElement
(
'li'
)
;
slide
.
classList
.
add
(
'splide__slide'
)
;
splide
.
add
(
slide
)
;
JavaScript
const splide = new Splide( '.splide' ); splide.mount(); // Adds a slide by HTML: splide.add( '<li class="splide__slide"></li>' ); // or adds an element: const slide = document.createElement( 'li' ); slide.classList.add( 'splide__slide' ); splide.add( slide );
Params
slides |
---|
index |
Do not call this method while the carousel is moving because it refreshes and repositions the carousel.
remove
remove( matcher: SlideMatcher ): this
Slide |
---|
index |
Slides |
const
splide
=
new
Splide
(
'.splide'
)
;
splide
.
mount
(
)
;
// Removes the slide at 0:
splide
.
remove
(
0
)
;
// Removes slides at 0 and 1:
splide
.
remove
(
[
0
,
1
]
)
;
// Removes slides by a selector:
splide
.
remove
(
'.is-visible'
)
;
// Removes slides by a predicate function:
splide
.
remove
(
Slide
=>
Slide
.
index
%
2
===
0
)
;
JavaScript
const splide = new Splide( '.splide' ); splide.mount(); // Removes the slide at 0: splide.remove( 0 ); // Removes slides at 0 and 1: splide.remove( [ 0, 1 ] ); // Removes slides by a selector: splide.remove( '.is-visible' ); // Removes slides by a predicate function: splide.remove( Slide => Slide.index % 2 === 0 );
Params
matcher |
---|
Do not call this method while the carousel is moving because it refreshes and repositions the carousel.
is
is( type: string ): boolean
const
splide
=
new
Splide
(
'.splide'
)
;
splide
.
mount
(
)
;
if
(
splide
.
is
(
'loop'
)
)
{
// do something
}
JavaScript
const splide = new Splide( '.splide' ); splide.mount(); if ( splide.is( 'loop' ) ) { // do something }
Params
type |
---|
refresh
refresh(): this
destroy
destroy( completely?: boolean ): this
Params
completely |
---|