If you are not comfortable with empty spaces before the first slide and after the last one, enable trimSpace option(it is true as default).

Focus is 'center' and edge spaces are trimmed.

01

02

03

04

05

06

07

08

09

new Splide( '#splide', {
focus : 2,
perPage: 2,
} );

gap

Gap between slides. CSS format is allowed such as 1em.

type: number|string default: 0

padding

Set padding-left/right in horizontal mode or padding-top/bottom in vertical one. Give a single value to set a same size for both sides or do an object for different sizes. Also, CSS format is allowed such as 1em.

accessibility

Whether to enable accessibility(ARIA attributes) or not. See this document for more information.

type: boolean default: true

isNavigation

Determine if a slider is a navigation for another. Use sync() API to synchronize two sliders.

type: boolean default: false

trimSpace

Whether to trim spaces before the first slide or after the last one. See focus or this document.

150

250

200

225

175

150

225

200

150

trimSpace:

false: Allow spaces.

true: Default. Remove spaces but sometimes the slider doesn’t move even when the active index is updated.

'move': Remove spaces and the slider always move when the active index is updated. This mode is not compatible with pagination(indicator dots).

type: boolean|string default: true

updateOnMove

The is-active class is added after transition is completed(the “moved” event) by default. If true, it will be added before transition.

This doesn’t perfectly work when a slide and its clone are shown at the same time. For example, when number of slides is less than perPage or using fixedWidth with a few slides, you will see 2(or more) active slides while transitioning.

type: boolean default: false

throttle

Throttle duration in milliseconds for the window resize event.

type: number default: 100

breakpoints

A collection of options applied on each breakpoint of window width. Acceptable options are:

rewind

speed

width

height

fixedWidth

fixedHeight

heightRatio

perPage

perMove

focus

gap

padding

pagination

drag

easing

destroy

For example, to reduce number of slides under 640px:

var options = {
perPage: 4,
breakpoints: {
640: {
perPage: 2,
},
}
};

If destroy option is available, the slider will be destroyed. This option accepts 2 values:

true: Destroy Splide but keep monitoring window width to remount it for other breakpoints.