APIs

You're browsing the documentation for v3

Class Properties

defaults

defaults: Options
Changes the default options for all Splide instances.
Splide.defaults = {
type : 'loop',
perPage: 3,
};
JavaScript

STATES

STATES: Record<string, number>
The collection of slider states.
CREATED
MOUNTED
IDLE
MOVING
DESTROYED
const splide = new Splide( '.splide' );
if ( splide.state.is( Splide.STATES.IDLE ) ) {
// do something
}
JavaScript

Instance Properties

root

readonly root: HTMLElement
The root element where the Splide is applied.

event

readonly event: EventBusObject

The EventBusObject object. You don't have to access this property in most cases. Use on(), off() or emit().


Components

readonly Components: Components
The collection of all component objects.
const splide = new Splide( '.splide' );
splide.mount();
const { Autoplay } = splide.Components;
Autoplay.pause();
JavaScript

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:

splideSplide
isParentboolean | 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

Neither change other readonly options, nor directly set a value to each property. That may break the slider.

// 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

length

length: number
get

index

index: number
get

Instance Methods

mount

mount( Extensions?: Record<string, ComponentConstructor>, Transition?: ComponentConstructor ): this
Initializes the instance. You can pass extensions or a custom transition component.

Params

Extensions
Transition

sync

sync( splide: Splide ): this

Syncs the slider 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

Params

splide

go

go( control: number | string ): this
Moves the slider with the following control patterns.
i
'+${i}'
'-${i}'
'>'
'<'
'>${i}'

In most cases, '>' and '<' notations are enough to control the slider 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

Params

control

on

on( events: string | string[], callback: EventBusCallback ): this
Registers an event handler.
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

Params

events
callback

off

off( events: string | string[] ): this
Removes the registered all handlers for the specified event or events. If you want to only remove a particular handler, use namespace to identify it.
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

Params

events

emit

emit( event: string, ...args: any[] ): this
Emits an event and triggers registered handlers.

Params

event
args

add

add( slides: string | HTMLElement | Array<string | HTMLElement>, index?: number ): this
Inserts a slide or slides at the specified position.
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( document.createElement( 'li' ) );
JavaScript

Params

slides
index
Do not call this method while the slider is moving because it refreshes and repositions the slider.

remove

remove( matcher: SlideMatcher ): this
Removes slides that match the provided matcher representation. It can be an index, an array with indices, a selector, or a predicate function that takes following arguments:
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

Params

matcher
Do not call this method while the slider is moving because it refreshes and repositions the slider.

is

is( type: string ): boolean
Checks the slider type.
const splide = new Splide( '.splide' );
splide.mount();
if ( splide.is( 'loop' ) ) {
// do something
}
JavaScript

Params

type

refresh

refresh(): this
Refreshes the slider. Most of components reinitialize themselves.

destroy

destroy( completely?: boolean ): this
Destroys the slider.

Params

completely