i18n

ローカライズ

デフォルト設定

Splide内で使用されているテキストは、オプションを介して修正できます。アクセシビリティの観点から、対象ユーザに合わせて適切に翻訳されることが望ましいでしょう。

デフォルトのテキストは以下の通りです。

キー	テキスト	説明
`prev`	Previous slide	「戻る」矢印の`aria-label`
`next`	Next slide	「進む」矢印の`aria-label`
`first`	Go to first slide	「戻る」矢印の`aria-label`
`last`	Go to last slide	「進む」矢印の`aria-label`
`slideX`	Go to slide %s	ページネーションの各ボタン、あるいはナビゲーション用のスライドに対する`aria-label`
`pageX`	Go to page %s	ページネーションの各ボタンに対する`aria-label`
`play`	Start autoplay	自動再生の再生・停止ボタンに対する`aria-label`
`pause`	Pause autoplay	自動再生の再生・停止ボタンに対する`aria-label`
`carousel`	carousel	ルート要素の`aria-roledescription`
`select`	Select a slide to show	ページネーションの`aria-label`
`slide`	slide	各スライドの`aria-roledescription`
`slideLabel`	%s of %s	各スライドの`aria-label`（{スライド番号} of {スライドの総数}）

aria-roledescriptionは非インタラクティブなコンテナ要素に対して、より適切な説明を加えるために使用されます。このテキストはスクリーンリーダが読み上げるため、翻訳する必要があります。

テキストを修正するには、i18nオプションに新しいテキストの入ったオブジェクトを渡します。

new Splide( '#splide', {
  i18n: {
		prev: '前のスライドに移動する',
		next: '次のスライドに移動する',
  }
} );
JavaScript

new Splide( '#splide', {
  i18n: {
		prev: '前のスライドに移動する',
		next: '次のスライドに移動する',
  }
} );

もし複数のスライダーを配置する場合、Splide.defaultsで一括設定してもよいかもしれません。

Splide.defaults = {
  i18n: {
		prev: 'Previous slide',
		next: 'Next slide',
  },
};
JavaScript

Splide.defaults = {
  i18n: {
		prev: 'Previous slide',
		next: 'Next slide',
  },
};

ただし、アクセシビリティのためのテキストは、より内容に沿ったものであるほうが親切です。たとえば、記事の一覧を表示する場合は、「次のスライドへ移動する」ではなく「次の記事へ移動する」のほうがより適切だと言えます。