Add i18n translation option.

dist/types/i18n.config.d.ts

@@ -0,0 +1,2 @@
+import i18n from 'i18next';
+export default i18n;

package.json

@@ -67,5 +67,7 @@
     "tslib": "^1.10.0",
     "typescript": "^3.7.5"
   },
-  "dependencies": {}
+  "dependencies": {
+    "i18next": "^23.5.1"
+  }
 }

src/i18n.config.ts

@@ -0,0 +1,131 @@
+
+import i18n from 'i18next';
+
+i18n.init({
+  lng: document.documentElement.lang,
+  fallbackLng: 'en',
+  resources: {
+    en: {
+      translation: {
+        "skipSliderForScreenreader": "Click to skip slider carousel",
+        "endOfSlider": "End of slider carousel",
+        "toggleAutoplay": "Toggle slider autoplay",
+        "displaySlideStatus_first": "Displaying first slide of {{count}} ",
+        "previousSlide": "Previous slide",
+        "nextSlide": "Next slide",
+        "displaySlideStatus": "Displaying slide {{count}} of {{totalSlides}}",
+        "moveSliderToItem": "Move slider to item {{count}}"
+      }
+    },
+    de: {
+      translation: {
+        "skipSliderForScreenreader": "Hier klicken um den Slider zu überspringen",
+        "endOfSlider": "Ende des Sliders",
+        "toggleAutoplay": "Toggle Slider Autoplay",
+        "displaySlideStatus_first": "Zeige erste Slide von {{count}}",
+        "previousSlide": "Vorherige Slide",
+        "nextSlide": "Nächste Slide",
+        "displaySlideStatus": "Zeige Slide {{count}} von {{totalSlides}}",
+        "moveSliderToItem": "Gehe zu Slide {{count}}"
+      }
+    },
+    nl: {
+      translation: {
+        "skipSliderForScreenreader": "Klik om slider carrousel over te slaan",
+        "endOfSlider": "Einde van slider carrousel",
+        "toggleAutoplay": "Toggle slider autoplay",
+        "displaySlideStatus_first": "Eerste dia van  {{count}} weergeven",
+        "previousSlide": "Vorige dia",
+        "nextSlide": "Volgende dia",
+        "displaySlideStatus": "Dia {{count}} van {{totalSlides}} weergeven",
+        "moveSliderToItem": "Verplaats schuif naar item {{count}}",
+      }
+    },
+    'en-US': {
+      translation: {
+        "skipSliderForScreenreader": "Click to skip slider carousel",
+        "endOfSlider": "End of slider carousel",
+        "toggleAutoplay": "Toggle slider autoplay",
+        "displaySlideStatus_first": "Displaying first slide of {{count}}",
+        "previousSlide": "Previous slide",
+        "nextSlide": "Next slide",
+        "displaySlideStatus": "Displaying slide {{count}} of {{totalSlides}}",
+        "moveSliderToItem": "Move slider to item {{count}}",
+        }
+    },
+    cz: {
+      translation: {
+        "skipSliderForScreenreader": "Kliknutím přeskočíte kolotoč posuvníků",
+        "endOfSlider": "Konec karuselu jezdce",
+        "toggleAutoplay": "Přepnout automatické přehrávání posuvníku",
+        "displaySlideStatus_first": "Zobrazení prvního snímku {{count}}",
+        "previousSlide": "Předchozí snímek",
+        "nextSlide": "Další snímek",
+        "displaySlideStatus": "Zobrazení snímku {{count}} z {{totalSlides}}",
+        "moveSliderToItem": "Přesunutí posuvníku na položku {{count}}",
+      }
+    },
+    es: {
+      translation: {
+        "skipSliderForScreenreader": "Haga clic para saltar el carrusel deslizante",
+        "endOfSlider": "Fin del carrusel deslizante",
+        "toggleAutoplay": "Activar la reproducción automática del control deslizante",
+        "displaySlideStatus_first": "Mostrando primera diapositiva de {{count}}",
+        "previousSlide": "Diapositiva anterior",
+        "nextSlide": "Diapositiva siguiente",
+        "displaySlideStatus": "Mostrar diapositiva {{cuenta}} de {{totalDiapositivas}}",
+        "moveSliderToItem": "Mover el deslizador al elemento {{count}}",
+      }
+    },
+    fr: {
+      translation: {
+        "skipSliderForScreenreader": "Cliquez pour sauter le carrousel de curseurs",
+        "endOfSlider": "Fin du carrousel de diapositives",
+        "toggleAutoplay": "Toggle slider autoplay",
+        "displaySlideStatus_first": "Affichage de la première diapositive de {{count}}",
+        "previousSlide": "Diapositive précédente",
+        "nextSlide": "Diapositive suivante",
+        "displaySlideStatus": "Affichage de la diapositive {{count}} de {{totalSlides}}",
+        "moveSliderToItem": "Déplacer le curseur vers l'élément {{count}}",
+      }
+    },
+    it: {
+      translation: {
+        "skipSliderForScreenreader": "Fare clic per saltare il carosello di scorrimento",
+        "endOfSlider": "Fine del carosello di diapositive",
+        "toggleAutoplay": "Attiva l'autoplay del cursore",
+        "displaySlideStatus_first": "Visualizzazione della prima diapositiva di {{count}}",
+        "previousSlide": "Diapositiva precedente",
+        "nextSlide": "Diapositiva successiva",
+        "displaySlideStatus": "Visualizzazione della diapositiva {{count}} di {{totalSlides}}",
+        "moveSliderToItem": "Spostare il cursore sull'elemento {{count}}",
+      }
+    },
+    pl: {
+      translation: {
+        "skipSliderForScreenreader": "Kliknij, aby pominąć karuzelę suwaka",
+        "endOfSlider": "Koniec karuzeli suwaków",
+        "toggleAutoplay": "Toggle slider autoplay",
+        "displaySlideStatus_first": "Wyświetlanie pierwszego slajdu {{count}}",
+        "previousSlide": "Poprzedni slajd",
+        "nextSlide": "Następny slajd",
+        "displaySlideStatus": "Wyświetlanie slajdu {{count}} z {{totalSlides}}",
+        "moveSliderToItem": "Przesunięcie suwaka do elementu {{count}}",
+      }
+    },
+    sv: {
+      translation: {
+        "skipSliderForScreenreader": "Klicka för att hoppa över sliderkarusellen",
+        "endOfSlider": "Slut på skjutreglage-karusell",
+        "ToggleAutoplay": "Växla skjutreglagets autoplay",
+        "displaySlideStatus_first": "Visar första bilden av {{count}}",
+        "previousSlide": "Föregående bild",
+        "nextSlide": "Nästa bild",
+        "displaySlideStatus": "Visar bild {{count}} av {{totalSlides}}",
+        "moveSliderToItem": "Flytta skjutreglaget till objektet {{count}}",
+      }
+    }
+  }
+});
+
+export default i18n;

src/index.ts

@@ -12,6 +12,7 @@ import {
   isPlatformiOS
 } from './utils';
 import './index.css';
+import i18n from './i18n.config';
 
 enum SlideDirection {
   Prev,
@@ -135,7 +136,7 @@ export default class A11YSlider {
       'a, area, input, select, textarea, button, iframe, object, embed, *[tabindex], *[contenteditable]';
     this._autoplayTimer = IsAutoplaying.No;
     this.autoplayBtn = createElement(
-      `<button type="button" class="a11y-slider-autoplay">Toggle slider autoplay</button>`
+      `<button type="button" class="a11y-slider-autoplay">${i18n.t("toggleAutoplay")}</button>`
     );
     this._pauseOnMouseLeave = false;
     this._skipBtns = [];
@@ -152,7 +153,7 @@ export default class A11YSlider {
     this.swipeX = 0;
     this.swipeXCached = 0;
     this.statusEl = createElement(
-      `<div class="a11y-slider-status" role="status">Displaying slide 1 of ${this.slides.length}</div>`
+      `<div class="a11y-slider-status" role="status">${i18n.t("displaySlideStatus", {context: "first", count: this.slides.length})}</div>`
     );
     this._hasCustomArrows =
       (options && options.prevArrow) || (options && options.nextArrow)
@@ -164,12 +165,12 @@ export default class A11YSlider {
       prevArrow:
         (options && options.prevArrow) ||
         createElement(
-          '<button type="button" class="a11y-slider-prev">Previous slide</button>'
+          `<button type="button" class="a11y-slider-prev">${i18n.t("previousSlide")}</button>`
         ),
       nextArrow:
         (options && options.nextArrow) ||
         createElement(
-          '<button type="button" class="a11y-slider-next">Next slide</button>'
+          `<button type="button" class="a11y-slider-next">${i18n.t("nextSlide")}</button>`
         ),
       dots: true,
       adaptiveHeight: false,
@@ -500,9 +501,10 @@ export default class A11YSlider {
       this.activeSlide
     );
 
-    this.statusEl.textContent = `Displaying slide ${activeIndex + 1} of ${
-      this.slides.length
-    }`;
+    this.statusEl.textContent = i18n.t('displaySlideStatus', {
+      count: activeIndex + 1,
+      totalSlides: this.slides.length
+    });
   }
 
   private _removeA11YStatus() {
@@ -686,10 +688,10 @@ export default class A11YSlider {
 
   private _addSkipBtn() {
     const beforeEl = createElement(
-      `<button class="a11y-slider-sr-only" type="button" tabindex="0">Click to skip slider carousel</button>`
+      `<button class="a11y-slider-sr-only" type="button" tabindex="0">${i18n.t("skipSliderForScreenreader")}</button>`
     );
     const afterEl = createElement(
-      `<div class="a11y-slider-sr-only" tabindex="-1">End of slider carousel</div>`
+      `<div class="a11y-slider-sr-only" tabindex="-1">${i18n.t("endOfSlider")}</div>`
     );
 
     // Event handler to go to end
@@ -749,7 +751,8 @@ export default class A11YSlider {
         dotBtn = createElement(this.options.customPaging(i, this));
       } else {
         dotBtn = createElement('<button type="button"></button>');
-        dotBtn.textContent = `Move slider to item #${i + 1}`;
+        dotBtn.textContent = i18n.t('moveSliderToItem', {
+          count: i + 1});
       }
 
       // Event handlers to switch to slide
@@ -1078,7 +1081,7 @@ export default class A11YSlider {
     } else if (target instanceof HTMLElement) {
       targetSlide = target;
     } else {
-      throw new Error('scrollToSlide only accepts an HTMLElement or number');
+      throw new Error(i18n.t('onlyHTMLElementOrNumber'));
     }
 
     // Dispatch custom event