i18n

Default Texts

Splide allows you to modify all texts used in the carousel. For the sake of accessibility, I highly recommend translating these default texts:

Key	Text	Description
`prev`	Previous slide	`aria-label` of a previous arrow
`next`	Next slide	`aria-label` of a next arrow
`first`	Go to first slide	`aria-label` of a previous arrow
`last`	Go to last slide	`aria-label` of a next arrow
`slideX`	Go to slide %s	`aria-label` of pagination or each navigation slide
`pageX`	Go to page %s	`aria-label` of pagination
`play`	Start autoplay	`aria-label` of a toggle button
`pause`	Pause autoplay	`aria-label` of a toggle button
`carousel`	carousel	`aria-roledescription` of a root element
`select`	Select a slide to show	`aria-label` of pagination
`slide`	slide	`aria-roledescription` of each slide
`slideLabel`	%s of %s	`aria-label` of each slide as {slide number} of {slide length}

The aria-roledescription attribute is used for a non-interactive element to define a human-readable text for assistive technologies.

Modifying Texts

To change the default texts, pass an object to the i18n option, and Splide merges them into the default collection:

new Splide( '#splide', {
  i18n: {
		prev: 'Previous slide',
		next: 'Next slide',
  }
} );
JavaScript

new Splide( '#splide', {
  i18n: {
		prev: 'Previous slide',
		next: 'Next slide',
  }
} );

If you have multiple carousels, you can use Splide.defaults property to set these text at once:

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

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

However, it's better to use more content-based texts if possible. For example, when viewing a list of articles, "Move to next article" is more appropriate than "Move to next slide".