Reworking screenshots js.

en/index.html

@@ -76,10 +76,12 @@
                 </div>
             </div>
             <div class="container-fluid" style="background-color: darkslategray;">
-                <div class="row align-items-center text-center text-light pt-3 pb-3">
+                <div class="row align-items-center text-center text-light pt-3 pb-3" style="position: relative;">
                     <h1 class="pl-5">Screenshots</h1>
+                    <button id="left-scroll" style="position: absolute; left: 0; top: 50%;"><i class="fas fa-chevron-left"></i></button>
+                    <button id="right-scroll" style="position: absolute; right: 0; top: 50%;"><i class="fas fa-chevron-right"></i></button>
                     <div class="screenshots">
-                        <img class="screenshot" src="../drawables/MusicApp/Screenshots/1.jpg" ondragstart="return false;">
+                        <img class="screenshot" style="padding-left: 4rem;" src="../drawables/MusicApp/Screenshots/1.jpg" ondragstart="return false;">
                         <img class="screenshot" src="../drawables/MusicApp/Screenshots/2.jpg" ondragstart="return false;">
                         <img class="screenshot" src="../drawables/MusicApp/Screenshots/3.jpg" ondragstart="return false;">
                         <img class="screenshot" src="../drawables/MusicApp/Screenshots/4.jpg" ondragstart="return false;">
@@ -87,7 +89,7 @@
                         <img class="screenshot" src="../drawables/MusicApp/Screenshots/6.jpg" ondragstart="return false;">
                         <img class="screenshot" src="../drawables/MusicApp/Screenshots/7.jpg" ondragstart="return false;">
                         <img class="screenshot" src="../drawables/MusicApp/Screenshots/8.jpg" ondragstart="return false;">
-                        <img class="screenshot" src="../drawables/MusicApp/Screenshots/9.jpg" ondragstart="return false;">
+                        <img class="screenshot" style="padding-right: 4rem;" src="../drawables/MusicApp/Screenshots/9.jpg" ondragstart="return false;">
                     </div>
                 </div>
             </div>

js/horizontalScrolling.js

@@ -7,7 +7,7 @@ sliders.forEach((slider) =>
     slider.addEventListener("mousedown", (eventArg) =>
     {
         sliding = true;
-        startX = eventArg.pageX;
+        startX = eventArg.pageX + slider.scrollLeft;
     });
 
     slider.addEventListener("mousemove", (eventArg) =>
@@ -15,7 +15,14 @@ sliders.forEach((slider) =>
         if (sliding)
         {
             eventArg.preventDefault();
-            slider.scrollLeft += (startX - eventArg.pageX) * $(window).width() / (2 * slider.scrollWidth);
+            slider.scrollLeft = startX - eventArg.pageX;
+
+            if (slider.scrollLeft == 0)
+                document.getElementById("left-scroll").style.display = "none";
+            else
+                document.getElementById("left-scroll").style.display = "inline-block";
+            
+            
         }
     });
     
@@ -26,4 +33,26 @@ sliders.forEach((slider) =>
     slider.addEventListener("mouseleave", () => {
         sliding = false;
     });
+
+    //Shouldn't do it here, but will say it's ok.
+    document.getElementById("left-scroll").onclick = function()
+    {
+        slider.scrollBy({ top: 0, left: -slider.offsetWidth * 0.66, behavior: "smooth" });
+        document.getElementById("right-scroll").style.display = "inline-block";
+
+        if (slider.scrollLeft == 0)
+            document.getElementById("left-scroll").style.display = "none";            
+    }
+
+    document.getElementById("right-scroll").onclick = function()
+    {
+        slider.scrollBy({ top: 0, left: slider.offsetWidth * 0.66, behavior: "smooth" });
+        document.getElementById("left-scroll").style.display = "inline-block";
+
+        console.log("Offset: " + slider.scrollWidth);
+        console.log("Scroll: " + slider.scrollLeft);
+
+        if (slider.scrollLeft == slider.scrollWidth)
+            document.getElementById("right-scroll").style.display = "none";
+    }
 });