fix thumbnails duplication

packages/gallery/src/components/gallery/proGallery/navigationPanel.js

@@ -83,7 +83,7 @@ class NavigationPanel extends React.Component {
           style={{ ...thumbnailsStyle }}
         >
           {items.map(({ thumbnailItem, location, idx }) => {
-            const highlighted = idx === activeIndex;
+            const highlighted = idx === activeIndex % items.length;
             const itemStyle = {
               width: thumbnailSize,
               height: thumbnailSize,

packages/gallery/src/components/gallery/proGallery/slideshowView.js

@@ -306,10 +306,8 @@ class SlideshowView extends React.Component {
         this.props.options.groupSize === 1 &&
         !this.props.isScrollLessGallery
       ) {
-        const skipToSlide = this.skipFromSlide - this.props.totalItemsCount;
-
         if (nextItem >= this.skipFromSlide) {
-          nextItem = skipToSlide;
+          nextItem = utils.inRange(nextItem, this.props.totalItemsCount);
           await this.props.actions.scrollToItem(nextItem);
         }
       }
@@ -487,15 +485,24 @@ class SlideshowView extends React.Component {
     }
   };
 
+  getFirstIdx(itemIdx) {
+    const { galleryItems } = this.props.galleryStructure;
+    const activeItemId = galleryItems[itemIdx].itemId;
+    return galleryItems.find((item) => item.itemId === activeItemId).idx;
+  }
+
   scrollToThumbnail(itemIdx, scrollDuration) {
     //not to confuse with this.props.actions.scrollToItem. this is used to replace it only for thumbnail items
 
     this.props.actions.eventsListener(
       GALLERY_CONSTS.events.THUMBNAIL_CLICKED,
       this.props
     );
+    const activeIdx = this.state.activeIndex;
+    const targetIdx =
+      activeIdx + (this.getFirstIdx(itemIdx) - this.getFirstIdx(activeIdx));
     this.scrollToIndex({
-      itemIdx,
+      itemIdx: targetIdx,
       scrollDuration,
       isRTL: this.props.options.isRTL,
     });

packages/gallery/src/components/helpers/thumbnailsLogic.ts

@@ -31,10 +31,10 @@
   return activeIndexOffsetMemory;
 }
 
 export function clearGalleryItems(items: any[], galleryItems: any[]): any[] {
   const clear = (list) =>
     utils
-      .uniqueBy(list, 'idx')
+      .uniqueBy(list, 'id')
       .filter((item) => item.idx !== undefined)
       .sort((a, b) => a.idx - b.idx);
   const clearedGalleryItems = clear(galleryItems);
@@ -117,6 +117,7 @@
     height,
     thumbnailSizeWithSpacing,
     activeIndex: activeIndexWithOffset,
+    itemsCount: galleryItems.length,
   });
 
   const thumbnailsStyleWithRTLCalc = isRTL
@@ -201,12 +202,14 @@
   height,
   activeIndex,
   thumbnailSizeWithSpacing,
+  itemsCount: numberOfItems,
 }: {
   horizontalThumbnails: boolean;
   width: number;
   height: number;
   activeIndex: number;
   thumbnailSizeWithSpacing: number;
+  itemsCount: number;
 }): CSSProperties {
   const baseStyle = {
     overflow: 'visible',
@@ -215,7 +218,7 @@
   };
   const size = horizontalThumbnails ? width : height;
   const unit = horizontalThumbnails ? 'left' : 'top';
-  const distance = thumbnailSizeWithSpacing * activeIndex;
+  const distance = thumbnailSizeWithSpacing * (activeIndex % numberOfItems);
   const initialCenter = size / 2 - thumbnailSizeWithSpacing / 2;
 
   return {