Frontend: Added a backward button to the slideshow element. Adapted CSS for both desktop and mobile.

frontend/src/lib/components/slideshow.svelte

@@ -1,6 +1,6 @@
 <script>
   import SvgIcon from "@jamescoyle/svelte-icon";
-  import { mdiArrowRight, mdiChevronLeft } from "@mdi/js";
+  import { mdiArrowRight, mdiArrowLeft, mdiRestore } from "@mdi/js";
   import "$lib/css/slideshow.css";
   import { onMount } from "svelte";
   import {
@@ -71,19 +71,24 @@
     }
   });
 
-  function slideCards() {
+  function slideCards(advance) {
     // Set or reset slideshow index, hidden array and timeling.
-    if (slideshow_index >= data.length - 1) {
+    if (advance) {
-      resetSlideCards();
+      if (slideshow_index >= data.length - 1) {
+        resetSlideCards();
+      } else {
+        slideshow_hidden.push(slideshow_index);
+        slideshow_index++;
+      }
     } else {
-      slideshow_hidden.push(slideshow_index);
+      slideshow_hidden.pop();
-      slideshow_index++;
+      slideshow_index--;
     }
 
     // Incrementing the transformValue for each element
     let transformValue = 0;
     for (const id of slideshow_hidden) {
-        transformValue += slideshowElements[id].clientWidth;
+      transformValue += slideshowElements[id].clientWidth;
     }
 
     // Translating elements
@@ -104,6 +109,8 @@
           if (slideshow_hidden.includes(id)) {
             slideshowTimeline[id].style.backgroundColor =
               "var(--color-background)";
+          } else {
+            slideshowTimeline[id].style.backgroundColor = "";
           }
         }
       }
@@ -161,7 +168,7 @@
       resizing = true;
 
       await resetSlideCards();
-      await new Promise(resolve => setTimeout(resolve, 400));
+      await new Promise((resolve) => setTimeout(resolve, 400));
       updateTimeLine(slideshowTimeline, slideshowBubbles);
       resizing = false;
       //global writer count
@@ -169,20 +176,37 @@
   }
 </script>
 
-<svelte:window on:resize={changeSize} bind:innerWidth={windowWidth}/>
+<svelte:window on:resize={changeSize} bind:innerWidth={windowWidth} />
 
 <div class="slideshow" bind:this={slideshow}>
-  <button class="slideshow_btn" on:click={slideCards}>
+  <button
+    class={slideshow_index >= 1
+      ? "slideshow_btn"
+      : "slideshow_btn slideshow_btn_center"}
+    on:click={() => slideCards(true)}
+  >
     <div>
       <SvgIcon
         size={windowWidth < 1000 ? "30" : "45"}
-        path={slideshow_index >= data.length - 1
+        path={slideshow_index >= data.length - 1 ? mdiRestore : mdiArrowRight}
-          ? mdiChevronLeft
-          : mdiArrowRight}
         type="mdi"
       />
     </div>
   </button>
+  <button
+    class={slideshow_index >= 1
+      ? "slideshow_btn slideshow_btn_low"
+      : "slideshow_btn slideshow_btn_low slideshow_btn_disabled"}
+    on:click={() => {
+      if (slideshow_index >= 1) slideCards(false);
+    }}
+  >
+    <SvgIcon
+      size={windowWidth < 1000 ? "30" : "45"}
+      path={mdiArrowLeft}
+      type="mdi"
+    />
+  </button>
   {#each data as selected_data, index (index)}
     <svelte:component
       this={type}

frontend/src/lib/css/slideshow.css

@@ -10,20 +10,33 @@
     .slideshow_btn {
         z-index: 2;
         position: absolute;
-        right: 0;
+        width: 5rem;
-        margin-right: 2.5rem;
+        height: 5rem;
-        min-width: 5rem;
-        min-height: 5rem;
-        background-color: var(--color-special);
-        box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
+        background-color: var(--color-special);
         color: var(--color-background);
         border: 0;
         transition: all .3s ease 0s;
         cursor: pointer;
+        /* height of slide-main + margin bottom of slide-main with an offset */
+        top: 3rem;
+        right: 5rem;
+        opacity: 100%;
+    }
+
+    .slideshow_btn_center {
+        top: 8rem;
+    }
+
+    .slideshow_btn_low {
+        top: calc(9rem + 4rem);
+    }
+
+    .slideshow_btn_disabled {
+        opacity: 0;
     }
 }
 
@@ -32,10 +45,9 @@
     .slideshow_btn {
         z-index: 2;
         position: absolute;
-        right: 0;
         margin-right: 1rem;
-        min-width: 3.5rem;
+        width: 3.5rem;
-        min-height: 3.5rem;
+        height: 3.5rem;
         background-color: var(--color-special);
         box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
         border-radius: 50%;
@@ -46,6 +58,21 @@
         border: 0;
         transition: all .3s ease 0s;
         cursor: pointer;
+        top: calc(15rem - 4rem);
+        right: 0;
+        opacity: 100%;
+    }
+
+    .slideshow_btn_center {
+        top: 15rem;
+    }
+
+    .slideshow_btn_low {
+        top: calc(15rem + 4rem);
+    }
+
+    .slideshow_btn_disabled {
+        opacity: 0;
     }
 }