fix(thumbs): improve thumbs with slidesPerGroup

fixes #3704
fixes #4007
fixes #4615
fixes #4208

Author: nolimits4web

src/components/thumbs/thumbs.js

@@ -110,13 +110,18 @@ const Thumbs = {
           .nextAll(`[data-swiper-slide-index="${swiper.realIndex}"]`)
           .eq(0)
           .index();
-        if (typeof prevThumbsIndex === 'undefined') newThumbsIndex = nextThumbsIndex;
-        else if (typeof nextThumbsIndex === 'undefined') newThumbsIndex = prevThumbsIndex;
-        else if (nextThumbsIndex - currentThumbsIndex === currentThumbsIndex - prevThumbsIndex)
-          newThumbsIndex = currentThumbsIndex;
-        else if (nextThumbsIndex - currentThumbsIndex < currentThumbsIndex - prevThumbsIndex)
+        if (typeof prevThumbsIndex === 'undefined') {
           newThumbsIndex = nextThumbsIndex;
-        else newThumbsIndex = prevThumbsIndex;
+        } else if (typeof nextThumbsIndex === 'undefined') {
+          newThumbsIndex = prevThumbsIndex;
+        } else if (nextThumbsIndex - currentThumbsIndex === currentThumbsIndex - prevThumbsIndex) {
+          newThumbsIndex =
+            thumbsSwiper.params.slidesPerGroup > 1 ? nextThumbsIndex : currentThumbsIndex;
+        } else if (nextThumbsIndex - currentThumbsIndex < currentThumbsIndex - prevThumbsIndex) {
+          newThumbsIndex = nextThumbsIndex;
+        } else {
+          newThumbsIndex = prevThumbsIndex;
+        }
         direction = swiper.activeIndex > swiper.previousIndex ? 'next' : 'prev';
       } else {
         newThumbsIndex = swiper.realIndex;
@@ -136,8 +141,11 @@ const Thumbs = {
           } else {
             newThumbsIndex = newThumbsIndex + Math.floor(slidesPerView / 2) - 1;
           }
-        } else if (newThumbsIndex > currentThumbsIndex) {
-          newThumbsIndex = newThumbsIndex - slidesPerView + 1;
+        } else if (
+          newThumbsIndex > currentThumbsIndex &&
+          thumbsSwiper.params.slidesPerGroup === 1
+        ) {
+          // newThumbsIndex = newThumbsIndex - slidesPerView + 1;
         }
         thumbsSwiper.slideTo(newThumbsIndex, initial ? 0 : undefined);
       }