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.

`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

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

Initializes the instance. You can pass extensions or a custom transition component.

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

Moves the carousel with the following control patterns.

`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

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

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

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

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

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

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`

`refresh`

refresh(): this

Refreshes the carousel. Most of components reinitialize themselves.

`destroy`

destroy( completely?: boolean ): this

Destroys the carousel.

Params

`completely`