carroussel thumbnial vertical droite

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

@@ -210,7 +210,7 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
   document.querySelectorAll('.carousel-items .carousel-item img').forEach((img) => {
     images.push({
       src: img.getAttribute('src'),
-      caption: img.getAttribute('alt') || 'Image sans légende'
+      caption: img.getAttribute('alt') || ''
     });
   });
 
@@ -218,6 +218,18 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
 
   let currentIndex = 0;
 
+  function scrollThumbnailToCenter(index) {
+    const thumbnails = document.querySelectorAll('.thumbnails img');
+    const activeThumb = thumbnails[index];
+    if (activeThumb && thumbsContainer) {
+      const containerHeight = thumbsContainer.clientHeight;
+      const thumbOffsetTop = activeThumb.offsetTop;
+      const thumbHeight = activeThumb.offsetHeight;
+      const scrollTarget = thumbOffsetTop - (containerHeight / 2) + (thumbHeight / 2);
+      thumbsContainer.scrollTo({ top: scrollTarget, behavior: 'smooth' });
+    }
+  }
+
   function showImage(index) {
     mainImage.src = images[index].src;
     caption.textContent = images[index].caption;
@@ -226,7 +238,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' });
+      scrollThumbnailToCenter(index); // 👈 centrage de la miniature active
     }
   }
 
@@ -274,6 +286,7 @@ function initCarousel({ mainImage, prevArrow, nextArrow, caption, thumbsContaine
     }
   });
 }
+
     
 /////////////////end diaporama ressource //////////