So, ich habe mal was gebastelt und deine Navigations-Elemente auf CSS umgestellt. Guckst Du hier:
https://jsfiddle.net/Rolf_b/9cndgm3r/1/
Das Nebeneinanderstellen von Buttons und Text habe ich per Flexbox gemacht, statt mit position und float, das kannst Du aber halten wie Du willst 😀
Guck's Dir einfach mal an.
Wenn Du die Sache mit der Closure nicht verstanden hast - keine Panik, das haben viele nicht. Es ist aber eine essenzielle Eigenschaft von Javascript - oder allgemein von funktionalen Programmierkonzepten, und eigentlich gar nicht schwer. Wenn Du Dir meine Haupt-Funktion anschaust: Die definiert Variablen pageNumber und $pages, sowie eine Funktion changePage. Innerhalb von changePage wird auf pageNumber und $pages zugegriffen. Dann wird changePage als Event-Handler registriert und DANN ENDET DER READY-HANDLER. In einer Programmiersprache ohne Closures wäre jetzt der Teufel los, weil es die Variablen nicht mehr gibt. Entweder gäbe es eine Fehlermeldung, oder das Programm würde bösartig in verlassenem und möglicherweise anderweit belegtem Speicher herumstochern. JavaScript ist anders. JavaScript bemerkt den Zugriff auf die Variable aus ihrer Umgebung, legt da ein Körbchen drumherum (die Closure) und hängt das Körbchen an die changePage Funktion. Auf diese Weise kann changePage mit Variablen eines längst verlassenen Aufruf-Kontextes weiterarbeiten und braucht keinerlei globale Variablen.
Den Rest meiner Hinweise habe ich im Codebeispiel bereits umgesetzt.
Rolf