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

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

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.