feat: adding paginations "of" label to options

Author: afshinm

src/core/showElement.js

@@ -253,7 +253,7 @@ export default function _showElement(targetElement) {
     self._lastShowElementTimer = window.setTimeout(() => {
       // set current step to the label
       if (oldHelperNumberLayer !== null) {
-        oldHelperNumberLayer.innerHTML = `${targetElement.step} of ${this._introItems.length}`;
+        oldHelperNumberLayer.innerHTML = `${targetElement.step} ${this._options.stepNumbersOfLabel} ${this._introItems.length}`;
       }
 
       // set current tooltip text
@@ -388,7 +388,7 @@ export default function _showElement(targetElement) {
 
     if (this._options.showStepNumbers === true) {
       helperNumberLayer.className = "introjs-helperNumberLayer";
-      helperNumberLayer.innerHTML = `${targetElement.step} of ${this._introItems.length}`;
+      helperNumberLayer.innerHTML = `${targetElement.step} ${this._options.stepNumbersOfLabel} ${this._introItems.length}`;
       tooltipLayer.appendChild(helperNumberLayer);
     }
 

src/index.js

@@ -61,8 +61,10 @@ function IntroJs(obj) {
     exitOnEsc: true,
     /* Close introduction when clicking on overlay layer? */
     exitOnOverlayClick: true,
-    /* Show step numbers in introduction? */
+    /* Display the pagination detail */
     showStepNumbers: false,
+    /* Pagination "of" label */
+    stepNumbersOfLabel: "of",
     /* Let user use keyboard to navigate the tour? */
     keyboardNavigation: true,
     /* Show tour control buttons? */