Slides

Overview

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

Methods

register()

Registers a slide element and creates a Slide object.

get()

Returns all Slide objects.

getIn()

Returns slides in the specified page.

getAt()

Returns a Slide object at the specified index.

add()

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 );

remove()

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

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 );

forEach()

Iterates over Slide objects by the iteratee function.

filter()

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

Adds a CSS rule to all slides or containers.

getLength()

Returns the length of slides.

isEnough()

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