add slideshow

assets/css/_home.scss

@@ -55,6 +55,12 @@
 }
 
 
+.slideshow{
+    width: 100%;
+    height: calc(var(--unit)*11);
+    overflow: hidden;
+}
+
 .highlight-block{
 
  
@@ -147,7 +153,7 @@
         grid-column: 1;
     }
 
-    .highlight-block{
+    .highlight-block, .slideshow{
         grid-column: 2;
         grid-row: 2;
     }

assets/css/_slideshow.scss

@@ -0,0 +1,160 @@
+
+
+.slideshow {
+    height: 100%;
+    width: 100%;
+    margin-left: 0;
+    overflow: hidden;
+    *{
+        position: relative;
+    }
+}
+            
+
+.slideshow-container{
+    height: 100%;
+    width: 100%;
+}
+
+.slideshow-inner {
+    width: calc(100% * var(--items));
+    height: 100%;
+}
+
+.slideshow-item {
+    width: calc(100%/var(--items));
+    height: 100%;
+    float: left;
+
+    figure{
+        width: 100%;
+        height: 100%;
+        img{
+            width: 100%;
+        height: 100%;
+        object-fit: cover; 
+        }
+    }
+}
+
+
+/* Display slides (input checked) 
+--------------------------------------------------------
+-------------------------------------------------------- */
+
+.slideshow-inner {
+    transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
+    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+.slideshow-item {
+    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%;
+}
+
+
+
+
+
+    
+/* Controls (arrows) 
+--------------------------------------------------------
+-------------------------------------------------------- */
+
+.slideshow-controls {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.slide_controls {
+    width: 40px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    cursor: pointer;
+    will-change: z-index;
+}
+.slide_controls-previous {
+    left: 0;
+}
+.slide_controls-next {
+    right: 0;
+}
+
+span.controls {
+    height: 100%;
+    position: absolute;
+    width: 100%;
+}
+
+span.controls::before,
+span.controls::after {
+    padding: 10px;
+    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;
+}
+
+span.controls::before {
+    content: "❬";
+    left: -1px;
+}
+
+span.controls::after {
+    content: "❭";
+    right: -1px;
+}
+
+/* Control arrows display
+--------------------------------------------------------------------
+-------------------------------------------------------------------- */
+
+#slide-input-1:checked ~ .slideshow-controls label {
+    z-index: -1;
+}
+#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(1),
+#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(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

@@ -313,6 +313,187 @@ button {
           text-decoration: underline var(--hover-bg);
 }
 
+.slideshow {
+  height: 100%;
+  width: 100%;
+  margin-left: 0;
+  overflow: hidden;
+}
+.slideshow * {
+  position: relative;
+}
+
+.slideshow-container {
+  height: 100%;
+  width: 100%;
+}
+
+.slideshow-inner {
+  width: calc(100% * var(--items));
+  height: 100%;
+}
+
+.slideshow-item {
+  width: calc(100% / var(--items));
+  height: 100%;
+  float: left;
+}
+.slideshow-item figure {
+  width: 100%;
+  height: 100%;
+}
+.slideshow-item figure img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+/* Display slides (input checked) 
+--------------------------------------------------------
+-------------------------------------------------------- */
+.slideshow-inner {
+  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
+  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+.slideshow-item {
+  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) 
+--------------------------------------------------------
+-------------------------------------------------------- */
+.slideshow-controls {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.slide_controls {
+  width: 40px;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  cursor: pointer;
+  will-change: z-index;
+}
+
+.slide_controls-previous {
+  left: 0;
+}
+
+.slide_controls-next {
+  right: 0;
+}
+
+span.controls {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+span.controls::before,
+span.controls::after {
+  padding: 10px;
+  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;
+}
+
+span.controls::before {
+  content: "❬";
+  left: -1px;
+}
+
+span.controls::after {
+  content: "❭";
+  right: -1px;
+}
+
+/* Control arrows display
+-------------------------------------------------------------------- 
+-------------------------------------------------------------------- */
+#slide-input-0:checked ~ .slideshow-controls label {
+  /* toggle all label nav */
+  display: block;
+}
+
+#slide-input-1:checked ~ .slideshow-controls label {
+  z-index: -1;
+}
+
+#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(1),
+#slide-input-1:checked ~ .slideshow-controls label:nth-of-type(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;
+}
+
+#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);
@@ -396,6 +577,12 @@ button {
   margin-bottom: calc(var(--unit) * 3);
 }
 
+.slideshow {
+  width: 100%;
+  height: calc(var(--unit) * 11);
+  overflow: hidden;
+}
+
 .highlight-block {
   background-color: var(--color);
   border: 1px solid var(--color-txt-light);
@@ -470,7 +657,7 @@ button {
 .home--section-tool .section--inner .item-nav {
   grid-column: 1;
 }
-.home--section-tool .section--inner .highlight-block {
+.home--section-tool .section--inner .highlight-block, .home--section-tool .section--inner .slideshow {
   grid-column: 2;
   grid-row: 2;
 }

assets/style.scss

@@ -6,6 +6,7 @@
 @use "css/site-footer";
 @use "css/buttons";
 @use "css/see-more";
+@use "css/slideshow";
 
 @use "css/home-item-nav";
 @use "css/home";

index.html

@@ -138,14 +138,64 @@
             </div>
 
    
-            <div class="slider">
+
+
+            <div class="slideshow" data-nbr-item="3" style="--items: 3">
+                <div class="slideshow-container">
+                
+                <!-- Inputs --------------------------------------- -->
+                <input type="radio" name="slide-input" id="slide-input-1" hidden="" checked=""/>
+                <input type="radio" name="slide-input" id="slide-input-2" hidden=""/>
+                <input type="radio" name="slide-input" id="slide-input-3" hidden=""/>
+                
+                <!-- Slides + container --------------------------- -->
+                <div class="slideshow-inner">
+                    <div class="slideshow-item" data-item="1">
                         <figure>
                             <img src="/content/images/atelier-2.png">
+                        </figure>
                         <figcaption>
                             Atelier Lorem Ispsum, Rennes, 23 septembre 2025
                         </figcaption>
+                    </div>
+                    <div class="slideshow-item" data-item="2">
+                        <figure>
+                            <img src="/content/images/atelier-1.png">
                         </figure>
+                        <figcaption>
+                            Atelier 2 Lorem Ispsum, Rennes, 23 septembre 2025
+                        </figcaption>                    </div>
+                    <div class="slideshow-item" data-item="3">
+                        <figure>
+                            <img src="/content/images/Epinay3.jpeg">
+                        </figure>
+                        <figcaption>
+                            Atelier 3 Lorem Ispsum, Epinay, 23 septembre 2025
+                        </figcaption> 
+                    </div>
+                </div>
                 
+        
+                
+                <!-- Controls (arrows) -------------------------------- -->
+
+                <nav class="slideshow-controls" aria-hidden="true">
+                    <!-- Slide 1: prev=3, next=2 -->
+                    <label for="slide-input-3" class="slide_controls slide_controls-previous" alt="Aller à la slide 3"></label>
+                    <label for="slide-input-2" class="slide_controls slide_controls-next" alt="Aller à la slide 2"></label>
+
+                    <!-- Slide 2: prev=1, next=3 -->
+                    <label for="slide-input-1" class="slide_controls slide_controls-previous" alt="Aller à la slide 1"></label>
+                    <label for="slide-input-3" class="slide_controls slide_controls-next" alt="Aller à la slide 3"></label>
+
+                    <!-- Slide 3: prev=2, next=1 -->
+                    <label for="slide-input-2" class="slide_controls slide_controls-previous" alt="Aller à la slide 2"></label>
+                    <label for="slide-input-1" class="slide_controls slide_controls-next" alt="Aller à la slide 1"></label>
+
+                    <span class="controls" aria-hidden="true"></span>
+                </nav>
+                  
+                </div>
             </div>
             
         </div>