final

template-parts/la-components/blocks/gallery-tabs/gallery-tabs.js

@@ -22,17 +22,22 @@ function initGalleryBlock(blockId) {
 
         thumbnailSwipers[tabId] = new Swiper(`#${blockId} #thumbnail-swiper-${tabId}`, {
             slidesPerView: 'auto',
-            spaceBetween: 24,
+            spaceBetween: 5,
             freeMode: true,
             grabCursor: true,
             watchSlidesProgress: true,
+            breakpoints: {
+                768: {
+                    spaceBetween: 24
+                }
+            }
         });
 
         swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
             slidesPerView: 'auto',
-            spaceBetween: 24,
-            centeredSlides: true,
-            initialSlide: 1,
+            spaceBetween: 12,
+            centeredSlides: false,
+            initialSlide: 0,
             scrollbar: {
                 el: `#swiper-scrollbar-${tabId}`,
                 draggable: true,
@@ -48,6 +53,11 @@ function initGalleryBlock(blockId) {
                     updateThumbnails(tabId, this.realIndex);
                     centerThumbnail(tabId, this.realIndex);
                 }
+            },
+            breakpoints: {
+                768: {
+                    spaceBetween: 24
+                }
             }
         });