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.


get()

get( excludeClones?: boolean ): SlideComponent[]

Returns all Slide objects.


getIn()

getIn( page: number ): SlideComponent[]

Returns slides in the specified page.


getAt()

getAt( index: number ): SlideComponent | undefined

Returns a Slide object at the specified index.


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

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:

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

forEach()

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

Iterates over Slide objects by the iteratee function.


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.


style()

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

Adds a CSS rule to all slides or containers.


getLength()

getLength( excludeClones?: boolean ): number

Returns the length of slides.


isEnough()

isEnough(): boolean

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