carroussel thumbnial vertical manque changement visuel fleche thumbnail

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 //////////