About Version 3

You're browsing the documentation for v3

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 → 27KB), 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

Following 3 properties of the Splide instance have been updated or removed. Arguments of some methods have been modified, but they are compatible with the v2 usage.

`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

document.addEventListener( 'DOMContentLoaded', () => {
  const splide = new Splide( '.splide' );


- console.log( splide.STATES );
+ console.log( Splide.STATES );
} );

`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

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

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

export function MyExtension( Splide ) {
-  return {
-    mounted() {
-
-    }
-  };


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

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