#38 Update scroling preview images list when slide change

Netcentric · Nov 16, 2023 · 75fa5b8 · 75fa5b8
1 parent 6a15126
commit 75fa5b8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/blocks/v2-images-grid/v2-images-grid.css b/blocks/v2-images-grid/v2-images-grid.css
@@ -99,10 +99,6 @@
 
 .v2-images-grid__carousel-preview-list {
   gap: 10px;
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
   padding: 20px;
   background: var(--c-primary-white);
 }

diff --git a/blocks/v2-images-grid/v2-images-grid.js b/blocks/v2-images-grid/v2-images-grid.js
@@ -47,7 +47,23 @@ const createModalContent = (content) => {
   const carouselItemsList = createElement('ul', { classes: `${blockClassName}__carousel-items-list` });
   const carouselImagesList = createElement('ul', { classes: `${blockClassName}__carousel-preview-list` });
 
+  let isScrolling = false;
+  let stopScrolling;
+
+  carouselItemsList.addEventListener('scroll', () => {
+    isScrolling = true;
+
+    clearTimeout(stopScrolling);
+    stopScrolling = setTimeout(() => {
+      isScrolling = false;
+    }, 50);
+  });
+
   const debouncedOnItemChange = debounce((index) => {
+    if (isScrolling) {
+      return;
+    }
+
     scrollLeft(carouselImagesList, index * 90);
   }, 100);
 
@@ -83,7 +99,11 @@ const createModalContent = (content) => {
       threshold: 1.0,
     };
 
-    const observer = new IntersectionObserver(() => {
+    const observer = new IntersectionObserver((entries) => {
+      if (!entries[0].isIntersecting) {
+        return;
+      }
+
       debouncedOnItemChange(index);
 
       udpateArrowsState(index, carouselItemsList.children.length, el.closest(`${blockClassName}__carousel-items-wrapper`));