Splide v3 Features

The main concepts of the version 3 are:

  • TypeScript
  • No Lighthouse audit errors
  • Accessibility enhancement
  • Free drag mode

A slider itself is controversial about its usability especially for people with disabilities. That's why improving the accessibility is very important, but there are a lot of hard obstacles at the same time. The Splide v3 aims to solve these technical challenges and provide a high quality slider as much as possible. See the Accessibility document for more details.

Here is a list of v3 features:

  • Rewrite all scripts by TypeScript
  • Reduce the code size (29KB → 26KB), keeping all features of the v2
  • Add 300+ test cases to make the library more stable
  • Implement the free drag mode
  • Implement the simple mouse wheel navigation for a vertical slider
  • Support sync with multiple sliders
  • Support the min-width media query for breakpoints
  • Handle passive event listeners where Lighthouse complains
  • Solve the window reference error for SSR
  • Assign is-prev to a previous slide and is-next to a next one

Migration

Splide Instance

STATES

The STATES property becomes static instead of the instance member.

document.addEventListener( 'DOMContentLoaded', () => {
const splide = new Splide( '.splide' );
console.log( splide.STATES );
console.log( Splide.STATES );
} );
JavaScript

classes and i18n

Both classes and i18n properties have been deleted. Read options directly.

document.addEventListener( 'DOMContentLoaded', () => {
const splide = new Splide( '.splide' );
console.log( splide.i18n );
console.log( splide.options.i18n );
console.log( splide.classes );
console.log( splide.options.classes );
} );
JavaScript

Options

These options have been deprecated:

dragAngleThreshold

The logic has been changed.

accessibility

The accessibility feature has been integrated to other related components.

throttled

Now Splide mainly uses the animation frame.

Extension

mounted()

The mounted() method has been deleted. Use the mounted event instead.

export function MyExtension( Splide ) {
return {
mounted() {
}
};
function mount() {
Splide.on( 'mounted', () => {
// do something.
} );
}
return {
mount,
}
}
JavaScript

Components

All components have been rewritten and drastically changed. Visit here to know their new public members (Components which are not listed there have no public members).