carroussel thumbnial vertical manque changement visuel fleche thumbnail

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

@@ -5862,6 +5862,7 @@ svg.ext {
   width: 100%;
   height: auto;
   object-fit: contain;
+  max-height: 550px;
 }
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .main-image-container .caption {
   margin-top: 1rem;
@@ -5932,7 +5933,7 @@ svg.ext {
 .page-node-type-ressource .type-les-projets-en-images.layout__region--top .block-region-top .block-entity-fieldnodefield-images .carousel .thumbnails-wrapper .thumbnails img {
   width: 60px;
   height: 60px;
-  object-fit: cover;
+  object-fit: contain;
   border: 2px solid transparent;
   cursor: pointer;
 }

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

@@ -183,10 +183,12 @@ jQuery(function ($) {
 
   }
 });
+
 /////////////////start diaporama ressource //////////
 document.addEventListener('DOMContentLoaded', function () {
-    // Vérifie que le body a la classe souhaitée
-    if (!document.body.classList.contains('type-media-images---photos')) return;
+  // Vérifie que le body a la classe souhaitée
+  if (!document.body.classList.contains('type-media-images---photos')) return;
+
   // Attendre que les éléments HTML soient bien présents
   const interval = setInterval(() => {
     const mainImage = document.getElementById('mainImage');
@@ -196,12 +198,13 @@ document.addEventListener('DOMContentLoaded', function () {
     const thumbsContainer = document.getElementById('thumbnails');
     const imagesInDom = document.querySelectorAll('.carousel-items .carousel-item img');
 
-    if (mainImage && prevArrow && nextArrow && caption && thumbsContainer && imagesInDom) {
+    if (mainImage && prevArrow && nextArrow && caption && thumbsContainer && imagesInDom.length > 0) {
       clearInterval(interval); // Tous les éléments sont là, on lance le carrousel
       initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContainer });
     }
   }, 100); // vérifie toutes les 100ms
 });
+
 function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContainer }) {
   const images = [];
   document.querySelectorAll('.carousel-items .carousel-item img').forEach((img) => {
@@ -210,7 +213,6 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
       caption: img.getAttribute('alt') || 'Image sans légende'
     });
   });
-  console.log('Images chargées pour le carrousel :', images);
 
   if (!images.length) return;
 
@@ -224,6 +226,7 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
     thumbnails.forEach(img => img.classList.remove('active'));
     if (thumbnails[index]) {
       thumbnails[index].classList.add('active');
+      // thumbnails[index].scrollIntoView({ block: 'center', behavior: 'smooth' });
     }
   }
 
@@ -241,26 +244,37 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
     const thumb = document.createElement('img');
     thumb.src = img.src;
     thumb.alt = img.caption;
-    thumb.onclick = () => {
+    thumb.addEventListener('click', () => {
       currentIndex = index;
       showImage(index);
-    };
+    });
     thumbsContainer.appendChild(thumb);
   });
 
   showImage(currentIndex);
+
   const thumbPrev = document.getElementById('thumbPrev');
   const thumbNext = document.getElementById('thumbNext');
 
+  // Boucle haut/bas avec scroll
   thumbPrev.addEventListener('click', () => {
-    thumbsContainer.scrollBy({ top: -150, behavior: 'smooth' });
-  });
-  
-  thumbNext.addEventListener('click', () => {
-    thumbsContainer.scrollBy({ top: 150, behavior: 'smooth' });
+    if (thumbsContainer.scrollTop <= 0) {
+      thumbsContainer.scrollTo({ top: thumbsContainer.scrollHeight, behavior: 'smooth' });
+    } else {
+      thumbsContainer.scrollBy({ top: -150, behavior: 'smooth' });
+    }
   });
 
+  thumbNext.addEventListener('click', () => {
+    const maxScrollTop = thumbsContainer.scrollHeight - thumbsContainer.clientHeight;
+    if (thumbsContainer.scrollTop >= maxScrollTop - 1) {
+      thumbsContainer.scrollTo({ top: 0, behavior: 'smooth' });
+    } else {
+      thumbsContainer.scrollBy({ top: 150, behavior: 'smooth' });
+    }
+  });
 }
+    
 /////////////////end diaporama ressource //////////
 
 

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

@@ -40,6 +40,7 @@
               width: 100%;
               height: auto;
               object-fit: contain;
+              max-height: 550px;
             }
           
             .caption {
@@ -120,7 +121,7 @@
                 img {
                   width: 60px;
                   height: 60px;
-                  object-fit: cover;
+                  object-fit: contain;
                   border: 2px solid transparent;
                   cursor: pointer;