Version 3

バージョン3について

v3用のドキュメントを参照しています

バージョン3の特徴

バージョン3の主たるコンセプトは、次の4点です。

TypeScript
Lighthouse監査のエラーを出さないこと
アクセシビリティの向上
フリードラッグモード

スライダーは多くのサイトで使用される一方、特に障害をもつ人たちに対するユーザビリティの観点から、広く議論の対象となっています。「使わない」というのももちろん選択肢の一つですが、スライダー自体のアクセシビリティをできる限り高めておくことも、別の選択肢として非常に重要です。しかしながら、そこには知識・技術両面から難しい課題が多く存在することもまた事実です。

Splideバージョン3では、このような問題を解決し、高品質で使い勝手の良いスライダーを一つの目標としながら作成にあたりました。アクセシビリティについての詳細は、このページをご覧ください。

v2からの改善点は、以下の通りです。

すべてのコードをTypeScriptで書き直しました
バージョン2の機能をすべて維持しつつ、コードサイズを減らしました(29KB → 27KB)
ライブラリの安定のため、300を超えるテストケースを追加しました
フリードラッグモードを実装しました
縦方向のスライダーのために、マウスホイールの機能を追加しました
複数のスライダーと動作を同期できるようにしました
ブレークポイントで使用するメディアクエリに、min-widthを指定できるようにしました
Lighthouseがエラーを出していた、passiveイベントリスナーに関する問題を解決しました
SSRにおいてwindowオブジェクトへのリファレンスエラーが出る問題を解決しました
一つ前のスライドにis-prevを、一つ後のスライドにis-nextクラスを付加しました

移行について

Splideインスタンス

Splideインスタンスのメンバのうち、3つのプロパティに変更が加わりました。メソッドについては引数に一部修正がありますが、v2の使用法のまま使えます。

`STATES`

STATESプロパティは、インスタンスでからクラスの静的プロパティに移動しました




-
+

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`と`i18n`

classesとi18nプロパティを削除しました。optionsから直接読み取ってください。




-
+

-
+

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

オプション

以下3つのオプションが廃止されました。

`dragAngleThreshold`	ドラッグのロジック変更により削除
`accessibility`	アクセシビリティを特徴に応じて適切なコンポーネントに分散したことにより削除
`throttled`	スロットリングの軸足をアニメーションフレームに移動させたことにより削除

エクステンション

`mounted()`

mounted()メソッドは廃止されました。必要な場合、代わりにmountedイベントを利用してください。


-
-
-
-
-

+
+
+
+
+
+
+
+
+

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

   function mount() {
     Splide.on( 'mounted', () => {
       // 何かの処理
     } );
   }
 
   return {
     mount,
   }
}
JavaScript

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


+  function mount() {
+    Splide.on( 'mounted', () => {
+      // 何かの処理
+    } );
+  }
+
+  return {
+    mount,
+  }
}

コンポーネント

すべてのコンポーネントは、ロジックの整理・最適化などにより抜本的な変更が加わっています。このページから、各コンポーネントのプロパティやメソッドを確認できます（一覧にないコンポーネントは、パブリックなメンバをもっていません）。