Fix counter link

src/js/plugins/navigation.js

@@ -48,9 +48,7 @@ export default class Navigation {
      * Counter Element.
      * @type {Element}
      */
-    this.counter = DOM.createNode('a', ELEMENT_ID.COUNTER);
-    this.counter.href = '#';
-    this.counter.title = 'View all slides';
+    this.counter = Navigation.createCounter(ELEMENT_ID.COUNTER);
     /**
      * @type {WebSlides}
      * @private
@@ -83,7 +81,7 @@ export default class Navigation {
    * @param {string|number} max Max slide number.
    */
   updateCounter(current, max) {
-    this.counter.textContent = `${current} / ${max}`;
+    this.counter.childNodes[0].textContent = `${current} / ${max}`;
   }
 
   /**
@@ -100,6 +98,21 @@ export default class Navigation {
     return arrow;
   }
 
+  /**
+   * Creates the navigation counter.
+   * @param {!String} id Desired ID for the counter.
+   * @return {Element} The arrow element.
+   */
+  static createCounter(id) {
+    const counter = DOM.createNode('span', id);
+    const link = document.createElement('a');
+    link.href = '#';
+    link.title = 'View all slides';
+    counter.appendChild(link);
+
+    return counter;
+  }
+
   /**
    * Slide Change event handler. Will update the text on the navigation.
    * @param {CustomEvent} event

static/css/base.css

@@ -316,6 +316,7 @@ html.ws-ready body {
 #webslides {
   height: 100vh;
   overflow-x: hidden;
+  overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
 /* -- Hide scrollbar, but still being able to scroll -- */
@@ -1547,7 +1548,7 @@ opacity: 1;
 }
 */
 
-#navigation #counter {
+#counter {
   position: relative;
   display: block;
   width: 10rem;
@@ -1555,15 +1556,13 @@ opacity: 1;
   margin-left: auto;
   text-align: center;
   line-height: 4.8rem;
-  height: auto;
-  padding: 0;
 }
 
 #navigation p {
   margin-bottom: 0;
 }
 
-#navigation a {
+a#next,a#previous {
   position: absolute;
   width: 4rem;
   height: 4rem;

static/js/webslides.js

@@ -1661,9 +1661,7 @@ var Navigation = function () {
      * Counter Element.
      * @type {Element}
      */
-    this.counter = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('a', ELEMENT_ID.COUNTER);
-    this.counter.href = '#';
-    this.counter.title = 'View all slides';
+    this.counter = Navigation.createCounter(ELEMENT_ID.COUNTER);
     /**
      * @type {WebSlides}
      * @private
@@ -1702,7 +1700,7 @@ var Navigation = function () {
   }, {
     key: 'updateCounter',
     value: function updateCounter(current, max) {
-      this.counter.textContent = current + ' / ' + max;
+      this.counter.childNodes[0].textContent = current + ' / ' + max;
     }
 
     /**
@@ -1752,6 +1750,24 @@ var Navigation = function () {
 
       return arrow;
     }
+
+    /**
+     * Creates the navigation counter.
+     * @param {!String} id Desired ID for the counter.
+     * @return {Element} The arrow element.
+     */
+
+  }, {
+    key: 'createCounter',
+    value: function createCounter(id) {
+      var counter = __WEBPACK_IMPORTED_MODULE_0__utils_dom__["a" /* default */].createNode('span', id);
+      var link = document.createElement('a');
+      link.href = '#';
+      link.title = 'View all slides';
+      counter.appendChild(link);
+
+      return counter;
+    }
   }]);
 
   return Navigation;