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

Splide has been just created.

MOUNTED

Splide has mounted components.

IDLE

Splide is ready.

MOVING

Splide is moving.

DESTROYED

Splide has been 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: Splide[]
Splide instances to sync with.

options

options: Options
get

An object with the latest options.

set

Merges options to the current options and emits updated event.

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

The number of slides.


index

index: number
get

The active slide index.

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

Optional. An object with extensions.

Transition

Optional. A Transition component.

Return

this


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

A Splide instance to sync with.

Return

this


go

go( control: number | string ): this
Moves the slider with the following control patterns.
i

Goes to the slide i

'+${i}'

Increments the slide index by i

'-${i}'

Decrements the slide index by i

'>'

Goes to the next page

'<'

Goes to the previous page

'>${i}'

Goes to the page 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

A control pattern.

Return

this


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

An event name or names separated by spaces. Use a dot(.) to append a namespace.

callback

A callback function.

Return

this


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

An event name or names separated by spaces. Use a dot(.) to append a namespace.

Return

this


emit

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

Params

event

An event name to emit.

args

Optional. Any number of arguments to pass to handlers.

Return

this


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

A slide element, an HTML string that represents a slide, or an array with them.

index

Optional. An index to insert a slide at.

Return

this


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

The Slide component object being processed

index

The index of the current item

Slides

An array with Slide objects being iterated over

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

An index, an array with indices, a selector string, or a predicate function.

Return

this


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

A type to test.

Return

true if the type matches the current one, or otherwise false.


refresh

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

Return

this


destroy

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

Params

completely

Optional. If true, Splide will not remount the slider by breakpoints.

Return

this