Slides

You're browsing the documentation for v3

Overview

The Slides component manages all Slide sub-components, including clones.

Methods

`register()`

register( slide: HTMLElement, index: number, slideIndex: number ): void

Registers a slide element and creates a Slide object.

Params

`slide`	A slide element to register.
`index`	A slide index.
`slideIndex`	A slide index for clones. This must be `-1` for normal slides.

`get()`

get( excludeClones?: boolean ): SlideComponent[]

Returns all Slide objects.

Params

`excludeClones`	Determines whether to exclude clones or not.

Return

An array with Slide objects.

`getIn()`

getIn( page: number ): SlideComponent[]

Returns slides in the specified page.

Params

`page`	A page index.

Return

An array with slides that belong to the page.

`getAt()`

getAt( index: number ): SlideComponent | undefined

Returns a Slide object at the specified index.

Params

`index`	A slide index.

Return

A Slide object if available, or otherwise undefined.

`add()`

add( slide: string | Element | Array<string | Element>, index?: number ): void

Inserts a slide or slides at the specified index.

// Adds a slide by HTML:
add( '<li class="splide__slide"></li>' );

// or adds an element:
const slide = document.createElement( 'li' );
slide.classList.add( 'splide__slide' );
add( slide );
JavaScript

// Adds a slide by HTML:
add( '<li class="splide__slide"></li>' );


// or adds an element:
const slide = document.createElement( 'li' );
slide.classList.add( 'splide__slide' );
add( slide );

Params

`items`	A slide element, an HTML string or an array with them.
`index`	Optional. An index to insert the slide at. If omitted, appends it to the list.

`remove()`

remove( matcher: SlideMatcher ): void

Removes slides that match the matcher that 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

remove( 0 );

// Removes slides at 0 and 1:
remove( [ 0, 1 ] );

// Removes slides by a selector:
remove( '.is-visible' );

// Removes slides by a predicate function:
remove( Slide => Slide.index % 2 === 0 );
JavaScript

remove( 0 );


// Removes slides at 0 and 1:
remove( [ 0, 1 ] );


// Removes slides by a selector:
remove( '.is-visible' );


// Removes slides by a predicate function:
remove( Slide => Slide.index % 2 === 0 );

Params

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

`forEach()`

forEach( iteratee: SlidesIteratee, excludeClones?: boolean ): void

Iterates over Slide objects by the iteratee function.

Params

`iteratee`	An iteratee function that takes a Slide object, an index and an array with Slides.
`excludeClones`	Optional. Determines whether to exclude clones or not.

`filter()`

filter( matcher: SlideMatcher ): SlideComponent[]

Filters Slides by the matcher that can be an index, an array with indices, a selector, or a predicate function. See remove() to know what arguments the function takes.

Params

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

Return

An array with SlideComponent objects.

`style()`

style( prop: string, value: string | number, useContainer?: boolean ): void

Adds a CSS rule to all slides or containers.

Params

`prop`	A property name.
`value`	A CSS value to add.
`useContainer`	Optional. Determines whether to apply the style to the container or not.

`getLength()`

getLength( excludeClones?: boolean ): number

Returns the length of slides.

Params

`excludeClones`	Optional. Determines whether to exclude clones or not.

Return

The length of slides.

`isEnough()`

isEnough(): boolean

Checks if the number of slides is over than the perPage option, including clones.

Return

true if there are enough slides, or otherwise false.