slider ok

assets/css/_home-item-nav.scss

@@ -37,7 +37,6 @@
         margin-top: 0.5em;
         flex-grow: 2;
         padding-right: 2ch;
-        font-weight: 500;
     }
 
     &:hover{

assets/css/_home.scss

@@ -57,8 +57,11 @@
 
 .slideshow{
     width: 100%;
+    height: calc(var(--unit)*13);
+
+    figure{
         height: calc(var(--unit)*11);
-    overflow: hidden;
+    }
 }
 
 .highlight-block{

assets/css/_slideshow.scss

@@ -1,10 +1,12 @@
-
+$slideshow-items: 3;
 
 .slideshow {
     height: 100%;
     width: 100%;
     margin-left: 0;
-    overflow: hidden;
+    // overflow-y: hidden;
+    overflow: visible;
+    --arrow-space: 40px;
     *{
         position: relative;
     }
@@ -14,6 +16,7 @@
 .slideshow-container{
     height: 100%;
     width: 100%;
+    overflow: hidden;
 }
 
 .slideshow-inner {
@@ -25,16 +28,26 @@
     width: calc(100%/var(--items));
     height: 100%;
     float: left;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
     figure{
-        width: 100%;
+        width: calc(100% - var(--arrow-space)*2);
-        height: 100%;
+        height: calc(100% - var(--unit));
         img{
             width: 100%;
         height: 100%;
         object-fit: cover; 
         }
     }
+
+    figcaption{
+        width: calc(100% - var(--arrow-space)*2);
+        font-size: var(--fs-small);
+        height: calc(var(--unit)*2);
+        padding-top: calc(var(--padding-inner)*0.5);
+    }
 }
 
 
@@ -52,18 +65,6 @@
 }
 
 
-/* Move slides overflowed container */
-#slide-input-1:checked ~ .slideshow-inner {
-    left: 0;
-}
-#slide-input-2:checked ~ .slideshow-inner {
-    left: -100%;
-}
-#slide-input-3:checked ~ .slideshow-inner {
-    left: -200%;
-}
-
-
 
 
 
@@ -106,14 +107,15 @@ span.controls::after {
     top: 50%;
     transform: translateY(-50%);
     position: absolute;
-    background: white;
+    // background: white;
     font-size: 20px;
     z-index: 9;
 }
 
 .slide_controls-previous:hover ~ span.controls:before,
 .slide_controls-next:hover ~ span.controls:after {
-    background: #bfbfbf!important;
+    // background: #bfbfbf!important;
+    opacity: 0.7;
 }
 
 span.controls::before {
@@ -126,32 +128,24 @@ span.controls::after {
     right: -1px;
 }
 
-/* Control arrows display
+/* Position slide + Control arrows display -------------------------------------------- */
---------------------------------------------------------------------
--------------------------------------------------------------------- */
 
-#slide-input-1:checked ~ .slideshow-controls label {
+
+@for $i from 1 through $slideshow-items {
+    #slide-input-#{$i}:checked ~ .slideshow-inner {
+        left: #{($i - 1) * -100%};
+    }
+}
+
+
+@for $i from 1 through $slideshow-items {
+    #slide-input-#{$i}:checked ~ .slideshow-controls label {
         z-index: -1;
     }
-#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(1),
+    #slide-input-#{$i}:checked ~ .slideshow-controls label:nth-of-type(#{$i * 2 - 1}),
-#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(2) {
+    #slide-input-#{$i}:checked ~ .slideshow-controls label:nth-of-type(#{$i * 2}) {
         z-index: 11;
     }
-
-#slide-input-2:checked ~ .slideshow-controls label {
-    z-index: -1;
-}
-#slide-input-2:checked ~ .slideshow-controls label:nth-of-type(3),
-#slide-input-2:checked ~ .slideshow-controls label:nth-of-type(4) {
-    z-index: 11;
-}
-
-#slide-input-3:checked ~ .slideshow-controls label {
-    z-index: -1;
-}
-#slide-input-3:checked ~ .slideshow-controls label:nth-of-type(5),
-#slide-input-3:checked ~ .slideshow-controls label:nth-of-type(6) {
-    z-index: 11;
 }
 
 

assets/style.css

@@ -317,7 +317,8 @@ button {
   height: 100%;
   width: 100%;
   margin-left: 0;
-  overflow: hidden;
+  overflow: visible;
+  --arrow-space: 40px;
 }
 .slideshow * {
   position: relative;
@@ -326,6 +327,7 @@ button {
 .slideshow-container {
   height: 100%;
   width: 100%;
+  overflow: hidden;
 }
 
 .slideshow-inner {
@@ -337,10 +339,13 @@ button {
   width: calc(100% / var(--items));
   height: 100%;
   float: left;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 .slideshow-item figure {
-  width: 100%;
+  width: calc(100% - var(--arrow-space) * 2);
-  height: 100%;
+  height: calc(100% - var(--unit));
 }
 .slideshow-item figure img {
   width: 100%;
@@ -348,6 +353,12 @@ button {
   -o-object-fit: cover;
      object-fit: cover;
 }
+.slideshow-item figcaption {
+  width: calc(100% - var(--arrow-space) * 2);
+  font-size: var(--fs-small);
+  height: calc(var(--unit) * 2);
+  padding-top: calc(var(--padding-inner) * 0.5);
+}
 
 /* Display slides (input checked) 
 --------------------------------------------------------
@@ -361,27 +372,6 @@ button {
   transition: all 0.5s ease-out;
 }
 
-/* Move slides overflowed container */
-#slide-input-1:checked ~ .slideshow-inner {
-  left: 0;
-}
-
-#slide-input-2:checked ~ .slideshow-inner {
-  left: -100%;
-}
-
-#slide-input-3:checked ~ .slideshow-inner {
-  left: -200%;
-}
-
-#slide-input-4:checked ~ .slideshow-inner {
-  left: -300%;
-}
-
-#slide-input-5:checked ~ .slideshow-inner {
-  left: -400%;
-}
-
 /* Controls (arrows) 
 --------------------------------------------------------
 -------------------------------------------------------- */
@@ -421,14 +411,13 @@ span.controls::after {
   top: 50%;
   transform: translateY(-50%);
   position: absolute;
-  background: white;
   font-size: 20px;
   z-index: 9;
 }
 
 .slide_controls-previous:hover ~ span.controls:before,
 .slide_controls-next:hover ~ span.controls:after {
-  background: #bfbfbf !important;
+  opacity: 0.7;
 }
 
 span.controls::before {
@@ -441,12 +430,17 @@ span.controls::after {
   right: -1px;
 }
 
-/* Control arrows display
+/* Position slide + Control arrows display -------------------------------------------- */
--------------------------------------------------------------------- 
+#slide-input-1:checked ~ .slideshow-inner {
--------------------------------------------------------------------- */
+  left: 0%;
-#slide-input-0:checked ~ .slideshow-controls label {
+}
-  /* toggle all label nav */
+
-  display: block;
+#slide-input-2:checked ~ .slideshow-inner {
+  left: -100%;
+}
+
+#slide-input-3:checked ~ .slideshow-inner {
+  left: -200%;
 }
 
 #slide-input-1:checked ~ .slideshow-controls label {
@@ -476,24 +470,6 @@ span.controls::after {
   z-index: 11;
 }
 
-#slide-input-4:checked ~ .slideshow-controls label {
-  z-index: -1;
-}
-
-#slide-input-4:checked ~ .slideshow-controls label:nth-of-type(7),
-#slide-input-4:checked ~ .slideshow-controls label:nth-of-type(8) {
-  z-index: 11;
-}
-
-#slide-input-5:checked ~ .slideshow-controls label {
-  z-index: -1;
-}
-
-#slide-input-5:checked ~ .slideshow-controls label:nth-of-type(9),
-#slide-input-5:checked ~ .slideshow-controls label:nth-of-type(10) {
-  z-index: 11;
-}
-
 .item-nav {
   border: 1px solid var(--color-txt-light);
   border-radius: var(--radius-small);
@@ -527,7 +503,6 @@ span.controls::after {
   margin-top: 0.5em;
   flex-grow: 2;
   padding-right: 2ch;
-  font-weight: 500;
 }
 .item-nav:hover {
   border-color: var(--color-txt);
@@ -579,8 +554,10 @@ span.controls::after {
 
 .slideshow {
   width: 100%;
+  height: calc(var(--unit) * 13);
+}
+.slideshow figure {
   height: calc(var(--unit) * 11);
-  overflow: hidden;
 }
 
 .highlight-block {