carroussel thumbnial vertical manque changement visuel fleche thumbnail

web/themes/custom/eql/dist/assets/css/bundle.css

@@ -5841,64 +5841,90 @@ svg.ext {
   width: 80%;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr 10fr;
+  gap: 1.5rem;
+  justify-content: center;
   margin: auto;
-  text-align: center;
+}
+.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-block {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  margin: 0 auto;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container {
-  position: relative;
   flex: 1;
-  max-width: 600px;
+  text-align: center;
-  overflow: hidden;
-  width: 100%;
-  object-fit: contain;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container img {
   width: 100%;
-  height: 100%;
+  height: auto;
   object-fit: contain;
-  transition: transform 0.3s ease-in-out;
-  border: none;
 }
-.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container img.animate {
+.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container .caption {
-  transform: scale(1.02);
+  margin-top: 1rem;
+  font-family: sans-serif;
+  text-align: center;
+  font-size: 1rem;
+  color: #444;
 }
-.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container .arrow {
+.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .arrow {
-  position: absolute;
+  display: none;
-  top: 50%;
+  font-size: 2rem;
-  transform: translateY(-50%);
+  color: #333;
   background: none;
   border-radius: 50%;
-  padding: 5px 10px;
+  width: 40px;
-  color: black;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
   cursor: pointer;
+  user-select: none;
+  transition: background 0.3s ease;
 }
-content .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container .arrow.left {
+.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .arrow:hover {
-  left: 10px;
+  background: #bbb;
 }
-.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container .arrow.right {
+.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .arrow.left {
-  right: 10px;
+  margin-right: 10px;
+}
+.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .arrow.right {
+  margin-left: 10px;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .caption {
   margin-top: 10px;
   font-family: sans-serif;
+  grid-column: 2;
+  grid-row: 2;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper {
+  grid-column: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
-  max-height: 500px;
+  max-height: 70vh;
-  overflow: hidden;
+  grid-row: 1/span 2;
+  top: -30px;
+  position: relative;
+}
+.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow {
+  cursor: pointer;
+  padding: 5px 10px;
+  background: #00aaff;
+  color: white;
+  border-radius: 50%;
+  user-select: none;
+  z-index: 2;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails {
   display: flex;
   flex-direction: column;
   gap: 10px;
   overflow-y: auto;
-  overflow-x: hidden;
+  max-height: 100%;
   scroll-behavior: smooth;
-  max-height: 400px;
-  padding: 10px 0;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails::-webkit-scrollbar {
   display: none;
@@ -5913,18 +5939,6 @@ content .page-node-type-ressource .type-les-projets-en-images.layout__region--to
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails img.active {
   border-color: #00aaff;
 }
-.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow {
-  cursor: pointer;
-  padding: 5px;
-  background: #00aaff;
-  color: white;
-  border-radius: 50%;
-  user-select: none;
-  margin: 5px 0;
-}
-.page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.left, .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumb-arrow.right {
-  margin: 0;
-}
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .field__items {
   display: none;
 }

web/themes/custom/eql/scripts/main.js

@@ -253,11 +253,11 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
   const thumbNext = document.getElementById('thumbNext');
 
   thumbPrev.addEventListener('click', () => {
-    thumbsContainer.scrollBy({ left: -150, behavior: 'smooth' });
+    thumbsContainer.scrollBy({ top: -150, behavior: 'smooth' });
   });
-
+  
   thumbNext.addEventListener('click', () => {
-    thumbsContainer.scrollBy({ left: 150, behavior: 'smooth' });
+    thumbsContainer.scrollBy({ top: 150, behavior: 'smooth' });
   });
 
 }

web/themes/custom/eql/scss/pages/_ressource-type-en-images.scss

@@ -17,89 +17,101 @@
         order: 7;
         width: 80%;
         .carousel {
+          display: grid;
+          // flex-direction: row;
+          grid-template-columns: 1fr 10fr;
+          gap: 1.5rem;
+          // align-items: flex-start;
+          justify-content: center;
+          margin: auto;
+          .main-image-block {
             display: flex;
-            // max-width: 60vw;
+            align-items: center;
-            margin: auto;
+            position: relative;
+            width: 100%;
+            margin: 0 auto;
+          }
+          
+          .main-image-container {
+            flex: 1;
             text-align: center;
-        
+          
-            .main-image-container {
+            img {
-              position: relative;
-            //   background: #e0f5ff;
-              // height: 500px;
-              // max-height: 500px;
-              flex: 1; // prend l’espace restant
-              max-width: 600px;
-              overflow: hidden;
               width: 100%;
+              height: auto;
               object-fit: contain;
-        
-              img {
-                width: 100%;
-                height: 100%;
-                object-fit: contain;
-                transition: transform 0.3s ease-in-out;
-                border: none ;
-                // transition: opacity 0.4s ease-in-out; // à réactiver si fade souhaité
-                &.animate {
-                  transform: scale(1.02); // léger effet smooth sur changement
-                }
-              }
-        
-              .arrow {
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                background:none;
-                border-radius: 50%;
-                padding: 5px 10px;
-                color: black;
-                cursor: pointer;
-                content
-        
-                &.left {
-                  left: 10px;
-                }
-        
-                &.right {
-                  right: 10px;
-                }
-              }
-                // #prevArrow{
-                //     &::before{
-                //     content:url("../images/pictos/fleche-droite-dans-rond.png");
-                //     display: block;
-                //     transform: scaleX(-1);
-                //     width: 50px;
-                // }
-                // }
-                // #nextArrow{
-                //     &::before{
-                //         content:url("../images/pictos/fleche-droite-dans-rond.png");
-                //         display: block;
-                //     }
-                // }
             }
+          
+            .caption {
+              margin-top: 1rem;
+              font-family: sans-serif;
+              text-align: center;
+              font-size: 1rem;
+              color: #444;
+            }
+          }
+          
+          .arrow {
+            display: none;
+            font-size: 2rem;
+            color: #333;
+            background: none;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            cursor: pointer;
+            user-select: none;
+            transition: background 0.3s ease;
+          
+            &:hover {
+              background: #bbb;
+            }
+          
+            &.left {
+              margin-right: 10px;
+            }
+          
+            &.right {
+              margin-left: 10px;
+            }
+          }
+          
         
             .caption {
               margin-top: 10px;
               font-family: sans-serif;
+              grid-column: 2;
+              grid-row: 2;
             }
             .thumbnails-wrapper {
+              grid-column: 1;
               display: flex;
               flex-direction: column;
               align-items: center;
-              max-height: 500px;
+              max-height: 70vh;
-              overflow: hidden;
+              grid-row: 1 /span 2;
+              top: -30px;
+              position: relative;
+              .thumb-arrow {
+                cursor: pointer;
+                padding: 5px 10px;
+                background: #00aaff;
+                color: white;
+                border-radius: 50%;
+                user-select: none;
+                z-index: 2;
+                // font-weight: bold;
+              }
             
               .thumbnails {
                 display: flex;
                 flex-direction: column;
                 gap: 10px;
                 overflow-y: auto;
-                overflow-x: hidden;
+                max-height: 100%;
                 scroll-behavior: smooth;
-                max-height: 400px;
-                padding: 10px 0;
             
                 &::-webkit-scrollbar {
                   display: none;
@@ -117,22 +129,8 @@
                   }
                 }
               }
-            
-              .thumb-arrow {
-                cursor: pointer;
-                padding: 5px;
-                background: #00aaff;
-                color: white;
-                border-radius: 50%;
-                user-select: none;
-                margin: 5px 0;
-            
-                &.left, &.right {
-                  // on ne les utilise plus horizontalement
-                  margin: 0;
-                }
-              }
             }
+            
         
             // .thumbnails-wrapper {
             //   position: relative;

web/themes/custom/eql/templates/block--entity-field--node--field-images.html.twig

@@ -47,16 +47,21 @@
     {% if is_ressource_page %}
     {# Affichage du carrousel uniquement sur les pages de type ressource #}
       <div class="carousel">
-        <div class="main-image-container">
+        <div class="main-image-block">
-          <div class="arrow left" id="prevArrow">←</div>
+  <div class="arrow left" id="prevArrow">←</div>
-          <img id="mainImage" src="" alt="Image principale">
+
-          <div class="arrow right" id="nextArrow">→</div>
+  <div class="main-image-container">
-        </div>
+    <img id="mainImage" src="..." alt="Image principale">
+    <p id="caption" class="caption">Légende ici</p>
+  </div>
+
+  <div class="arrow right" id="nextArrow">→</div>
+</div>
         <div class="caption" id="caption"></div>
         <div class="thumbnails-wrapper">
-          <div class="thumb-arrow left" id="thumbPrev">←</div>
+          <div class="thumb-arrow up" id="thumbPrev">←</div>
           <div class="thumbnails" id="thumbnails"></div>
-          <div class="thumb-arrow right" id="thumbNext">→</div>
+          <div class="thumb-arrow down" id="thumbNext">→</div>
         </div>
       </div>
     {% endif %}