APIs

Class Properties

`defaults`

defaults: Options

Changes the default options for all Splide instances.

Splide.defaults = {
  type   : 'loop',
  perPage: 3,
};
JavaScript

Splide.defaults = {
  type   : 'loop',
  perPage: 3,
};

`STATES`

STATES: Record<string, number>

The collection of carousel states. You will not need to use MOUNTED since the state immediately changes to IDLE.

`CREATED`	Splide has been just created.
`MOUNTED`	Splide has mounted components (see above).
`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

const splide = new Splide( '.splide' );


if ( splide.state.is( Splide.STATES.IDLE ) ) {
  // do something
}

Instance Properties

`root`

readonly root: HTMLElement

The root element where the Splide is applied.

`event`

readonly event: EventInterfaceObject

The EventInterfaceObject object. You don't have to access this property. 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

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`	A Splide instance
`isParent`	`boolean \| undefined`	`true` if the instance above is a parent that has called `sync()`.

`options`

options: Options

`get`	An object with the latest options.
`set`	Merges provided 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

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`	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 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`	A Splide instance to sync with.

Return

this

`go`

go( control: number | string ): this

Moves the carousel 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 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`	A control pattern.

Return

this

`on`

on( events: string | string[], callback: AnyFunction ): 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

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

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`	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( 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`	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

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

`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

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`	An index, an array with indices, a selector string, or a predicate function.

Return

this

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

`is`

is( type: string ): boolean

Checks the carousel type.

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`	A type to test.

Return

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

`refresh`

refresh(): this

Refreshes the carousel. Most of components reinitialize themselves.

Return

this

`destroy`

destroy( completely?: boolean ): this

Destroys the carousel.

Params

`completely`	Optional. If `true`, Splide will not remount the carousel by breakpoints.

Return

this